diff --git a/packages/react/src/components/header/header.tsx b/packages/react/src/components/header/header.tsx
index 69622342e..945ab0235 100644
--- a/packages/react/src/components/header/header.tsx
+++ b/packages/react/src/components/header/header.tsx
@@ -23,7 +23,7 @@ export function Header({ id }: HeaderProps) {
   const frameToggleSidebar = useSetAtom(toggleSidebarAtom);
 
   return (
-    <header id={id} className="bg-base-2 z-40 flex items-center gap-4 pl-2">
+    <header id={id} className="z-40 flex items-center gap-4 bg-base-2 pl-2">
       <Button
         size="icon"
         variant="ghost"
@@ -37,7 +37,7 @@ export function Header({ id }: HeaderProps) {
       <Button
         size="icon"
         variant="ghost"
-        className="text-base-9 -ml-3 p-0"
+        className="-ml-3 p-0 text-base-9"
         onClick={() => toggle(!dark)}
       >
         <div className="i-heroicons:magnifying-glass h-full text-xl" />
@@ -45,7 +45,7 @@ export function Header({ id }: HeaderProps) {
       <Button
         size="icon"
         variant="ghost"
-        className="text-base-9 p-0"
+        className="p-0 text-base-9"
         onClick={() => toggle(!dark)}
       >
         <div className="i-heroicons:sun-20-solid h-full text-xl " />
diff --git a/packages/react/src/components/layout/InlayContainer.tsx b/packages/react/src/components/layout/InlayContainer.tsx
index 5b42f4141..79764945b 100644
--- a/packages/react/src/components/layout/InlayContainer.tsx
+++ b/packages/react/src/components/layout/InlayContainer.tsx
@@ -25,7 +25,7 @@ export function InlayContainer({ children }: InlayContainerProps) {
       <div
         className={cn(
           "bg-base-3 flex h-fit w-full md:w-80 shrink-0 flex-col gap-2 rounded-lg px-2 py-4",
-          { "hidden md:block": itemSelected },
+          { "hidden md:flex": itemSelected },
         )}
         onClick={() => setItemSelected(true)}
       >