💄 Fix scrollbar bookmark widget (#957)

ajnart · May 20, 2023 · 336aff1 · 336aff1
1 parent f8e0ffa
commit 336aff1
Showing 1 changed file with 15 additions and 4 deletions.
diff --git 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"