Increase side padding to 5rem when app is in wide mode (#2613)

* Increase side padding to 5rem when app is in wide mode * Upload Cypress snapshot
streamlit · Jan 20, 2021 · 419c858 · 419c858
1 parent 1cff62a
commit 419c858
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/e2e/specs/st_set_page_config.spec.js b/e2e/specs/st_set_page_config.spec.js
@@ -45,4 +45,10 @@ describe("st.set_page_config", () => {
       "wide"
     );
   });
+
+  it("displays in wide mode", () => {
+    cy.get("[data-testid='stReportViewContainer']").matchImageSnapshot(
+      "wide-mode"
+    );
+  });
 });
diff --git a/frontend/cypress/snapshots/linux/2x/st_set_page_config.spec.js/wide-mode.snap.png b/frontend/cypress/snapshots/linux/2x/st_set_page_config.spec.js/wide-mode.snap.png
diff --git a/frontend/src/components/core/ReportView/styled-components.ts b/frontend/src/components/core/ReportView/styled-components.ts
@@ -66,16 +66,24 @@ export interface StyledReportViewBlockContainerProps {
 
 export const StyledReportViewBlockContainer = styled.div<
   StyledReportViewBlockContainerProps
->(({ isWideMode, theme }) => ({
-  flex: 1,
-  width: theme.sizes.full,
-  paddingLeft: theme.inSidebar ? theme.spacing.none : theme.spacing.lg,
-  paddingRight: theme.inSidebar ? theme.spacing.none : theme.spacing.lg,
-  paddingTop: theme.inSidebar ? theme.spacing.none : "5rem",
-  paddingBottom: theme.inSidebar ? theme.spacing.none : "10rem",
-  minWidth: isWideMode ? "auto" : undefined,
-  maxWidth: isWideMode ? "initial" : theme.sizes.contentMaxWidth,
-}))
+>(({ isWideMode, theme }) => {
+  const wideSidePadding = isWideMode ? "5rem" : theme.spacing.lg
+  return {
+    flex: 1,
+    width: theme.sizes.full,
+    paddingLeft: theme.inSidebar ? theme.spacing.none : theme.spacing.lg,
+    paddingRight: theme.inSidebar ? theme.spacing.none : theme.spacing.lg,
+    // Increase side padding, if layout = wide and we're not on mobile
+    "@media (min-width: 576px)": {
+      paddingLeft: theme.inSidebar ? theme.spacing.none : wideSidePadding,
+      paddingRight: theme.inSidebar ? theme.spacing.none : wideSidePadding,
+    },
+    paddingTop: theme.inSidebar ? theme.spacing.none : "5rem",
+    paddingBottom: theme.inSidebar ? theme.spacing.none : "10rem",
+    minWidth: isWideMode ? "auto" : undefined,
+    maxWidth: isWideMode ? "initial" : theme.sizes.contentMaxWidth,
+  }
+})
 
 export const StyledReportViewFooterLink = styled.a(({ theme }) => ({
   color: theme.colors.gray50,