fix: compact bookmark cards

apps/docs/docs/widgets/bookmarks/index.mdx

@@ -18,7 +18,7 @@ Paste a URL and press Enter, paste several comma-separated or one-per-line URLs,
 URLs do not need an App record; Homarr uses the site's favicon and falls back to a link icon when it cannot load one.
 Bookmarks selected from Apps continue to use the App name, URL, icon, and description.
 
-**Adaptive** layout is the practical default: it changes between icons, compact rows, and tiles as the widget changes shape. Every compact item exposes its destination on hover, while advanced view expands items into descriptive cards.
+**Adaptive** layout is the practical default: it changes between icons, compact rows, and tiles as the widget changes shape. **Compact grid** keeps every card to a short row. Enable **Expand cards to fill row** when cards in an incomplete final row should use the remaining width. Every compact item exposes its destination on hover, while advanced view expands items into descriptive cards.
 
 ### Screenshots
 

apps/docs/docs/widgets/bookmarks/index.ts

@@ -56,6 +56,12 @@ export const bookmarksWidget: WidgetDefinition = {
         values: { type: "boolean" },
         defaultValue: "yes",
       },
+      {
+        name: "Expand cards to fill row",
+        description: "Whether cards in an incomplete final row expand to use the remaining width.",
+        values: { type: "boolean" },
+        defaultValue: "no",
+      },
       {
         name: "Bookmarks",
         description: "URLs and existing Apps shown by the widget.",

packages/translation/src/lang/en.json

@@ -2272,6 +2272,9 @@
         "withBorder": {
           "label": "Show border"
         },
+        "grow": {
+          "label": "Expand cards to fill row"
+        },
         "customUrls": {
           "label": "Custom links"
         },

packages/widgets/src/bookmarks/bookmarks-widget.tsx

@@ -6,6 +6,7 @@ import {
   Box,
   Card,
   Center,
+  Grid,
   Group,
   ScrollArea,
   SimpleGrid,
@@ -156,6 +157,14 @@ export default function BookmarksWidget({
               <Group gap={options.spacing} wrap="nowrap" mih="100%" align="stretch">
                 {cards}
               </Group>
+            ) : options.grow ? (
+              <Grid grow columns={plan.columns} gap={options.spacing}>
+                {cards.map((card) => (
+                  <Grid.Col key={card.key} span={1}>
+                    {card}
+                  </Grid.Col>
+                ))}
+              </Grid>
             ) : (
               <SimpleGrid cols={plan.columns} spacing={options.spacing} verticalSpacing={options.spacing}>
                 {cards}

packages/widgets/src/bookmarks/index.tsx

@@ -49,6 +49,7 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
       hideHostname: factory.switch({ defaultValue: false }),
       openNewTab: factory.switch({ defaultValue: true }),
       withBorder: factory.switch({ defaultValue: false }),
+      grow: factory.switch({ defaultValue: false }),
       customUrls: factory.internal({ defaultValue: [] as string[] }),
       items: factory.sortableItemList<BookmarkSelectionItem, string>({
         ItemComponent: ({ item, handle, removeItem, removeLabel, rootAttributes }) => {

packages/widgets/src/bookmarks/layout.ts

@@ -240,8 +240,20 @@ export const getBookmarkDisplayPlan = ({
     };
   }
 
-  let columns: number = widthSettings.compactColumns;
-  let orientation: BookmarkOrientation = "horizontal";
+  if (layout === "gridHorizontal") {
+    return {
+      columns: Math.min(count, widthSettings.compactColumns),
+      horizontalScroll: false,
+      itemHeight: 56,
+      itemWidth: widthSettings.rowItemWidth,
+      orientation: "horizontal",
+      showHostname: widthSettings.showHostname && heightSettings.showHostname,
+      showTitle: widthSettings.showTitle && heightSettings.showTitle,
+    };
+  }
+
+  let columns: number = widthSettings.adaptiveColumns;
+  let orientation: BookmarkOrientation = widthSettings.adaptiveOrientation;
   if (layout === "grid") {
     columns = widthSettings.gridColumns;
     orientation = "vertical";