From 336aff13cccb751cca6bc839331ea59f73ce59e2 Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Sat, 20 May 2023 18:04:15 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Fix=20scrollbar=20bookmark=20wid?=
 =?UTF-8?q?get=20(#957)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/bookmark/BookmarkWidgetTile.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/widgets/bookmark/BookmarkWidgetTile.tsx b/src/widgets/bookmark/BookmarkWidgetTile.tsx
index e1b5a0106..c0da29cd1 100644
--- a/src/widgets/bookmark/BookmarkWidgetTile.tsx
+++ b/src/widgets/bookmark/BookmarkWidgetTile.tsx
@@ -29,6 +29,7 @@ import { z } from 'zod';
 import { IconSelector } from '../../components/IconSelector/IconSelector';
 import { defineWidget } from '../helper';
 import { IDraggableEditableListInputValue, IWidget } from '../widgets';
+import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
 
 interface BookmarkItem {
   id: string;
@@ -175,14 +176,19 @@ interface BookmarkWidgetTileProps {
 function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
   const { t } = useTranslation('modules/bookmark');
   const { classes } = useStyles();
+  const { enabled: isEditModeEnabled } = useEditModeStore();
 
   if (widget.properties.items.length === 0) {
     return (
       <Stack align="center">
         <IconPlaylistX />
         <Stack spacing={0}>
-          <Title order={5} align="center">{t('card.noneFound.title')}</Title>
-          <Text align="center" size="sm">{t('card.noneFound.text')}</Text>
+          <Title order={5} align="center">
+            {t('card.noneFound.title')}
+          </Title>
+          <Text align="center" size="sm">
+            {t('card.noneFound.text')}
+          </Text>
         </Stack>
       </Stack>
     );
@@ -191,7 +197,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
   switch (widget.properties.layout) {
     case 'autoGrid':
       return (
-        <Box className={classes.grid} display="grid">
+        <Box className={classes.grid} display="grid" mr={isEditModeEnabled ? 'xl' : undefined}>
           {widget.properties.items.map((item: BookmarkItem, index) => (
             <Card
               className={classes.autoGridItem}
@@ -209,7 +215,12 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
     case 'horizontal':
     case 'vertical':
       return (
-        <ScrollArea offsetScrollbars type="always" h="100%">
+        <ScrollArea
+          offsetScrollbars
+          type="always"
+          h="100%"
+          mr={isEditModeEnabled ? 'xl' : undefined}
+        >
           <Flex
             style={{ flexDirection: widget.properties.layout === 'vertical' ? 'column' : 'row' }}
             gap="md"