address findings

chili-publish · Dec 6, 2024 · 33d9c53 · 33d9c53
1 parent 3b210d4
commit 33d9c53
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 38 deletions.
diff --git a/src/MainContent.tsx b/src/MainContent.tsx
@@ -372,7 +372,7 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
                                         )}
                                         <SuiCanvas
                                             // intent prop to calculate pages container
-                                            hasMultiplePages={layoutIntent === LayoutIntent.print}
+                                            hasMultiplePages={layoutIntent === LayoutIntent.print && pages?.length > 1}
                                             hasAnimationTimeline={layoutIntent === LayoutIntent.digitalAnimated}
                                             data-id={getDataIdForSUI('canvas')}
                                             data-testid={getDataTestIdForSUI('canvas')}

diff --git a/src/components/pagesPanel/Pages.styles.ts b/src/components/pagesPanel/Pages.styles.ts
@@ -1,28 +1,26 @@
 import { ITheme } from '@chili-publish/grafx-shared-components';
 import styled from 'styled-components';
 
-export const Container = styled.div<{ themeStyles: ITheme }>`
+export const Container = styled.div<{ themeStyles: ITheme; isMobileSize: boolean }>`
     box-sizing: border-box;
     display: flex;
     overflow: hidden;
     white-space: nowrap;
-    max-width: 100%;
+    max-width: ${({ isMobileSize }) => (!isMobileSize ? 'calc(100vw - 18.875rem)' : '100%')};
     height: 7.5rem;
-
-    background: ${({ themeStyles }) => themeStyles.timeline.wrapper.backgroundColor};
+    background: ${({ themeStyles }) => themeStyles.panel.backgroundColor};
     border-top: 2px solid ${({ themeStyles }) => themeStyles.panel.borderColor};
 `;
-export const ScrollableContainer = styled.div<{ isMobileSize: boolean }>`
+export const ScrollableContainer = styled.div`
     display: flex;
     height: 100%;
     padding: 0 0.625rem;
     align-items: center;
     overflow-x: auto;
+    width: auto;
     white-space: nowrap;
-    max-width: ${({ isMobileSize }) => (!isMobileSize ? 'calc(100vw - 18.75rem)' : '100%')};
     overflow-y: hidden;
     white-space: nowrap;
-    scrollbar-width: thin;
 `;
 export const Card = styled.div<{ themeStyles: ITheme; selected?: boolean }>`
     box-sizing: border-box;

diff --git a/src/components/pagesPanel/Pages.tsx b/src/components/pagesPanel/Pages.tsx
@@ -4,6 +4,7 @@ import {
     PreviewCard,
     PreviewCardVariant,
     PreviewType,
+    ScrollbarWrapper,
     useMobileSize,
     useTheme,
 } from '@chili-publish/grafx-shared-components';
@@ -77,36 +78,38 @@ function Pages({ pages, activePageId, pagesToRefresh, setPagesToRefresh }: Pages
     }, [pagesToRefresh, setPagesToRefresh, getPagesSnapshot]);
 
     return (
-        <Container themeStyles={theme}>
-            <ScrollableContainer isMobileSize={isMobileSize}>
-                {!!pages?.length &&
-                    pages.map((item, index) => (
-                        <PreviewCardBadge badgeNumber={index + 1} key={`badge-${item.id}`}>
-                            <Card themeStyles={theme} selected={item.id === activePageId} key={`card-${item.id}`}>
-                                <PreviewCard
-                                    key={`${item.id}-preview-card`}
-                                    path={
-                                        pageSnapshots[index] &&
-                                        URL.createObjectURL(
-                                            new Blob([pageSnapshots[index].snapshot.buffer], { type: 'image/png' }),
-                                        )
-                                    }
-                                    type={PreviewType.IMAGE}
-                                    itemId={item.id}
-                                    fallback={PREVIEW_FALLBACK}
-                                    padding="0"
-                                    options={[]}
-                                    renamingDisabled
-                                    variant={PreviewCardVariant.LIST}
-                                    selected={item.id === activePageId}
-                                    onClickCard={() => {
-                                        handleSelectPage(item.id);
-                                    }}
-                                />
-                            </Card>
-                        </PreviewCardBadge>
-                    ))}
-            </ScrollableContainer>
+        <Container themeStyles={theme} isMobileSize={isMobileSize}>
+            <ScrollbarWrapper invertScrollbarColors>
+                <ScrollableContainer>
+                    {!!pages?.length &&
+                        pages.map((item, index) => (
+                            <PreviewCardBadge badgeNumber={index + 1} key={`badge-${item.id}`}>
+                                <Card themeStyles={theme} selected={item.id === activePageId} key={`card-${item.id}`}>
+                                    <PreviewCard
+                                        key={`${item.id}-preview-card`}
+                                        path={
+                                            pageSnapshots[index] &&
+                                            URL.createObjectURL(
+                                                new Blob([pageSnapshots[index].snapshot.buffer], { type: 'image/png' }),
+                                            )
+                                        }
+                                        type={PreviewType.IMAGE}
+                                        itemId={item.id}
+                                        fallback={PREVIEW_FALLBACK}
+                                        padding="0"
+                                        options={[]}
+                                        renamingDisabled
+                                        variant={PreviewCardVariant.LIST}
+                                        selected={item.id === activePageId}
+                                        onClickCard={() => {
+                                            handleSelectPage(item.id);
+                                        }}
+                                    />
+                                </Card>
+                            </PreviewCardBadge>
+                        ))}
+                </ScrollableContainer>
+            </ScrollbarWrapper>
         </Container>
     );
 }