fix: address board switcher review

packages/widgets/src/bookmarks/bookmark.module.css

@@ -23,15 +23,3 @@
 .bookmarkButton:focus-visible .bookmarkIcon {
   background-color: var(--mantine-color-iconColor-filled-hover);
 }
-
-.compactScrollViewport > div {
-  display: flex !important;
-  width: 100%;
-  min-height: 100%;
-}
-
-.compactScrollContent {
-  flex: 1;
-  min-width: 100%;
-  min-height: 100%;
-}

packages/widgets/src/bookmarks/component.tsx

@@ -2,7 +2,19 @@
 
 import type { CSSProperties } from "react";
 import { useMemo } from "react";
-import { Anchor, Card, Flex, Group, ScrollArea, SimpleGrid, Stack, Text, Title, UnstyledButton } from "@mantine/core";
+import {
+  Anchor,
+  Box,
+  Card,
+  Flex,
+  Group,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+  UnstyledButton,
+} from "@mantine/core";
 import { IconLink } from "@tabler/icons-react";
 import combineClasses from "clsx";
 
@@ -30,7 +42,6 @@ export interface CompactBookmarkLayout {
   columns: number;
   hideHostname: boolean;
   hideTitle: boolean;
-  minimumItemWidth: number;
   minimumItemSize: number;
 }
 
@@ -53,7 +64,6 @@ export function getCompactBookmarkLayout(
     columns,
     hideHostname: cellWidth < 120 || cellHeight < (usesHorizontalItems ? 52 : 96),
     hideTitle: cellWidth < 64 || cellHeight < 40,
-    minimumItemWidth: targetWidth,
     minimumItemSize: usesHorizontalItems ? 48 : 96,
   };
 }
@@ -129,17 +139,12 @@ export default function BookmarksWidget({
         />
       )}
       {displayMode !== "advanced" && (
-        <ScrollArea
-          classNames={{ viewport: classes.compactScrollViewport }}
-          type="auto"
-          scrollbarSize={6}
-          style={{ flex: 1, minHeight: 0 }}
-        >
-          <div className={classes.compactScrollContent}>
+        <ScrollArea type="auto" scrollbarSize={6} offsetScrollbars style={{ flex: 1, minHeight: 0 }}>
+          <Box mih="100%">
             {options.layout === "grid" || options.layout === "gridHorizontal" ? (
               <GridLayout
                 data={data}
-                minimumItemWidth={compactLayout.minimumItemWidth}
+                columns={compactLayout.columns}
                 minimumItemHeight={compactLayout.minimumItemSize}
                 itemDirection={options.layout === "gridHorizontal" ? "horizontal" : "vertical"}
                 hideTitle={compactHideTitle}
@@ -162,7 +167,7 @@ export default function BookmarksWidget({
                 hasIconColor={board.iconColor !== null}
               />
             )}
-          </div>
+          </Box>
         </ScrollArea>
       )}
     </Stack>
@@ -335,7 +340,7 @@ interface GridLayoutProps {
   withBorder: boolean;
   itemDirection: "horizontal" | "vertical";
   hasIconColor: boolean;
-  minimumItemWidth: number;
+  columns: number;
   minimumItemHeight: number;
 }
 
@@ -348,13 +353,20 @@ const GridLayout = ({
   withBorder,
   itemDirection,
   hasIconColor,
-  minimumItemWidth,
+  columns,
   minimumItemHeight,
 }: GridLayoutProps) => {
   const board = useRequiredBoard();
 
   return (
-    <Flex gap={4} wrap="wrap" miw="100%" mih="100%" style={{ alignContent: "stretch" }}>
+    <SimpleGrid
+      cols={columns}
+      spacing={4}
+      verticalSpacing={4}
+      miw="100%"
+      mih="100%"
+      style={{ gridAutoRows: `minmax(${minimumItemHeight}px, 1fr)` }}
+    >
       {data.map((app) => {
         const href = getSafeAppHref(app.href);
         return (
@@ -365,11 +377,7 @@ const GridLayout = ({
             target={href ? (openNewTab ? "_blank" : "_self") : undefined}
             rel={href && openNewTab ? SAFE_NEW_TAB_REL : undefined}
             key={app.id}
-            style={{
-              flex: `1 0 calc(${minimumItemWidth}px * var(--mantine-scale, 1))`,
-              minWidth: 0,
-              minHeight: `calc(${minimumItemHeight}px * var(--mantine-scale, 1))`,
-            }}
+            h="100%"
           >
             <Card
               h="100%"
@@ -399,7 +407,7 @@ const GridLayout = ({
           </UnstyledButton>
         );
       })}
-    </Flex>
+    </SimpleGrid>
   );
 };
 

packages/widgets/src/media-server/component.tsx

@@ -147,7 +147,7 @@ function StreamTableHeader({
   const SortIcon = !active ? IconArrowsSort : sort.descending ? IconChevronDown : IconChevronUp;
 
   return (
-    <Table.Th style={{ width }} aria-sort={active ? (sort.descending ? "descending" : "ascending") : "none"}>
+    <Table.Th w={width} aria-sort={active ? (sort.descending ? "descending" : "ascending") : "none"}>
       {sortable ? (
         <UnstyledButton className={classes.sortButton} onClick={() => onSort(column)}>
           <Text component="span" size="xs" fw={600} c="dimmed" style={{ letterSpacing: "0.02em" }} truncate>