Desktop: Improve Resize Handle (anomalyco#6608)

Author: dbpolito

packages/app/src/pages/layout.tsx

@@ -1034,13 +1034,20 @@ export default function Layout(props: ParentProps) {
       <div class="flex-1 min-h-0 flex">
         <div
           classList={{
-            "hidden xl:flex": true,
-            "relative @container w-12 pb-5 shrink-0 bg-background-base": true,
-            "flex-col gap-5.5 items-start self-stretch justify-between": true,
-            "border-r border-border-weak-base contain-strict": true,
+            "hidden xl:block": true,
+            "relative shrink-0": true,
           }}
-          style={{ width: layout.sidebar.opened() ? `${layout.sidebar.width()}px` : undefined }}
+          style={{ width: layout.sidebar.opened() ? `${layout.sidebar.width()}px` : "48px" }}
         >
+          <div
+            classList={{
+              "@container w-full h-full pb-5 bg-background-base": true,
+              "flex flex-col gap-5.5 items-start self-stretch justify-between": true,
+              "border-r border-border-weak-base contain-strict": true,
+            }}
+          >
+            <SidebarContent />
+          </div>
           <Show when={layout.sidebar.opened()}>
             <ResizeHandle
               direction="horizontal"
@@ -1052,7 +1059,6 @@ export default function Layout(props: ParentProps) {
               onCollapse={layout.sidebar.close}
             />
           </Show>
-          <SidebarContent />
         </div>
         <div class="xl:hidden">
           <div

packages/ui/src/components/resize-handle.css

@@ -2,12 +2,33 @@
   position: absolute;
   z-index: 10;
 
+  &::after {
+    content: "";
+    position: absolute;
+    background-color: var(--color-border-strong-base);
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+    border-radius: 2px;
+  }
+
+  &:hover::after,
+  &:active::after {
+    opacity: 1;
+  }
+
   &[data-direction="horizontal"] {
     inset-block: 0;
     inset-inline-end: 0;
     width: 8px;
     transform: translateX(50%);
     cursor: ew-resize;
+
+    &::after {
+      width: 3px;
+      inset-block: 0;
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
   }
 
   &[data-direction="vertical"] {
@@ -16,5 +37,12 @@
     height: 8px;
     transform: translateY(-50%);
     cursor: ns-resize;
+
+    &::after {
+      height: 3px;
+      inset-inline: 0;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
   }
 }