fix: allow overflow scroll for widget list and dashboard overlow list. (#2558)

Dashboard list overflows, but would not be selectable, made selectable
and extend over to overflow. Panels list would wrap text (which worked
before it was a spectrum list, which now needs same height items), now
overflow scroll on x and y.

Before:
<img width="373" height="396" alt="image"
src="https://github.com/user-attachments/assets/0e163165-363e-4375-a6a2-da49641ec545"
/>

After:
<img width="361" height="402" alt="image"
src="https://github.com/user-attachments/assets/e8fc258d-ea3b-4533-8051-cc2968fa04c5"
/>

Author: dsmmcken

packages/code-studio/src/main/WidgetList.scss

@@ -9,7 +9,6 @@ $widget-list-owner-hover-color: $gray-200;
 
 .widget-list-container {
   height: 25.6rem;
-  padding: 0 0.5rem;
   text-align: left;
   width: 23rem;
 
@@ -22,11 +21,21 @@ $widget-list-owner-hover-color: $gray-200;
     outline: none;
   }
 
+  .widget-list-header {
+    padding: $spacer-2 $spacer-2 $spacer $spacer-2;
+  }
+
+  .widget-list-footer {
+    padding: $spacer-2;
+  }
+
   .widget-list {
-    margin: 0.5rem -0.5rem 0;
+    display: grid;
+    align-content: start;
     padding: 0;
-    text-align: left;
+    margin: 0;
     overflow: auto;
+
     li {
       list-style: none;
       padding: 0;
@@ -35,12 +44,15 @@ $widget-list-owner-hover-color: $gray-200;
     .btn {
       border: none;
       border-radius: 0;
-      display: block;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
       text-align: left;
       margin: 0;
       padding: 0.35rem 0.5rem;
       width: 100%;
       color: $widget-list-color;
+
       &:hover,
       &:focus {
         color: $widget-list-hover-color;
@@ -53,14 +65,4 @@ $widget-list-owner-hover-color: $gray-200;
       padding: 0 $spacer-2;
     }
   }
-
-  .widget-list-header,
-  .widget-list-footer {
-    padding-top: $spacer-2;
-    padding-bottom: $spacer-2;
-
-    .btn .fa-md {
-      margin-right: $spacer-2;
-    }
-  }
 }

packages/code-studio/src/main/WidgetList.tsx

@@ -196,7 +196,7 @@ export function WidgetList(props: WidgetListProps): JSX.Element {
       </div>
       <div className="widget-list-footer">
         <Button kind="ghost" onClick={onExportLayout}>
-          <div className="fa-md fa-layers">
+          <div className="fa-md fa-layers mr-1">
             <FontAwesomeIcon
               mask={vsPreview}
               icon={vsArrowSmallDown}
@@ -210,7 +210,7 @@ export function WidgetList(props: WidgetListProps): JSX.Element {
           Export Layout
         </Button>
         <Button kind="ghost" onClick={onImportLayout}>
-          <div className="fa-md fa-layers">
+          <div className="fa-md fa-layers mr-1">
             <FontAwesomeIcon
               mask={vsPreview}
               icon={vsArrowSmallUp}

packages/components/src/navigation/DashboardList.scss

@@ -4,24 +4,26 @@ $dashboard-list-color: $gray-200;
 $dashboard-list-hover-color: $foreground;
 $dashboard-list-background-hover-color: var(--dh-color-highlight-hover);
 
-$dashboard-list-owner-color: $gray-400;
-$dashboard-list-owner-hover-color: $gray-200;
-
 .dashboard-list-container {
   height: 25.6rem;
-  padding: 0 0.5rem;
   text-align: left;
   width: 23rem;
 
   &:focus {
     outline: none;
   }
 
+  .dashboard-list-header {
+    padding: $spacer-2 $spacer-2 $spacer $spacer-2;
+  }
+
   .dashboard-list {
-    margin: 0.5rem -0.5rem 0;
+    display: grid;
+    align-content: start;
     padding: 0;
-    text-align: left;
+    margin: 0;
     overflow: auto;
+
     li {
       list-style: none;
       padding: 0;
@@ -51,13 +53,4 @@ $dashboard-list-owner-hover-color: $gray-200;
       padding: 0 $spacer-2;
     }
   }
-
-  .dashboard-list-header {
-    padding-top: $spacer-2;
-    padding-bottom: $spacer-2;
-
-    .btn .fa-md {
-      margin-right: $spacer-2;
-    }
-  }
 }

packages/components/src/navigation/NavTabList.scss

@@ -159,10 +159,12 @@ $tab-control-btn-offset: -8px;
   }
 
   .tab-controls-btn-left {
+    background-image: linear-gradient(270deg, transparent 0%, $background 25%);
     margin-right: $tab-control-btn-offset;
   }
 
   .tab-controls-btn-right {
+    background-image: linear-gradient(90deg, transparent 0%, $background 25%);
     margin-left: $tab-control-btn-offset;
   }
 }

packages/components/src/navigation/NavTabList.tsx

@@ -277,9 +277,9 @@ function NavTabList({
     const { children } = containerRef.current;
     for (let i = 0; i < children.length; i += 1) {
       const child = children[i] as HTMLElement;
-      // Add 5px to right edge to account for rounding of offset values
+      // Subtract 5px from right edge to account for rounding of offset values
       if (
-        child.offsetLeft + 5 >
+        child.offsetLeft + child.offsetWidth - 5 >
         containerRef.current.scrollLeft + containerRef.current.offsetWidth
       ) {
         child.scrollIntoView({