From 8a071f9ab6bc4c85073dc52cc2e60da69f30950a Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Fri, 28 Mar 2025 19:11:31 +0000
Subject: [PATCH] fix: bookmarks layout (#2675)

* fix: bookmarks layout

* chore: address pull request feedback

* fix: make icon bigger when only icon exists for vertical item

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
---
 packages/widgets/src/bookmarks/component.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index db7eabf07..09066f90d 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -154,7 +154,7 @@ const GridLayout = ({
   const board = useRequiredBoard();
 
   return (
-    <Flex mih="100%" miw="100%" gap={4} wrap="wrap">
+    <Flex miw="100%" gap={4} wrap="wrap" style={{ flex: 1 }}>
       {data.map((app) => (
         <UnstyledButton
           component="a"
@@ -208,7 +208,7 @@ const VerticalItem = ({
   hasIconColor: boolean;
 }) => {
   return (
-    <Stack h="100%" gap="sm">
+    <Stack h="100%" miw={16} gap="sm" justify={"center"}>
       {!hideTitle && (
         <Text fw={700} ta="center" size="xs">
           {app.name}
@@ -221,10 +221,10 @@ const VerticalItem = ({
           alt={app.name}
           className={classes.bookmarkIcon}
           style={{
-            width: hideHostname && hideTitle ? 16 : 24,
-            height: hideHostname && hideTitle ? 16 : 24,
+            width: hideHostname && hideTitle ? "min(max(100%, 16px), 40px)" : 40,
+            height: hideHostname && hideTitle ? "min(max(100%, 16px), 40px)" : 40,
             overflow: "auto",
-            flex: 1,
+            flex: "unset",
             marginLeft: "auto",
             marginRight: "auto",
           }}
@@ -253,7 +253,7 @@ const HorizontalItem = ({
   hasIconColor: boolean;
 }) => {
   return (
-    <Group wrap="nowrap" gap="xs" h="100%" justify="center">
+    <Group wrap="nowrap" gap="xs" h="100%" justify="start">
       {!hideIcon && (
         <MaskedOrNormalImage
           imageUrl={app.iconUrl}