fix: global styles overflow

Author: shiftpsh

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

example/src/stories/Container.stories.tsx

@@ -18,6 +18,10 @@ export default {
       control: { type: 'select', options: ['none', 'normal', 'wide'] },
       description: 'The padding of the container',
     },
+    topBarPadding: {
+      control: 'boolean',
+      description: 'Whether to include top navigation bar padding or not',
+    },
     as: {
       control: { type: 'select', options: ['div', 'span', 'button', 'a'] },
       description: 'The element to render the container as',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solved-ac/ui-react",
-  "version": "0.0.1-alpha.31",
+  "version": "0.0.1-alpha.32",
   "description": "React component library used by solved.ac",
   "author": "shiftpsh",
   "license": "MIT",

src/components/Container.tsx

@@ -20,24 +20,28 @@ const paddingMap = {
 
 interface ContainerContainerProps {
   padding: 'none' | 'normal' | 'wide'
+  topBarPadding: boolean
 }
 
 const ContainerContainer = styled.nav<ContainerContainerProps>`
   max-width: ${v.width};
   ${({ padding }) => paddingMap[padding]}
+  ${({ topBarPadding }) => topBarPadding && 'padding-top: 48px;'}
   margin: 0 auto;
 `
 
 export interface ContainerProps {
   w?: string | number
   padding?: 'none' | 'normal' | 'wide'
+  topBarPadding?: boolean
 }
 
 export const Container: PC<'div', ContainerProps> = React.forwardRef(
   <T extends ElementType>(props: PP<T, ContainerProps>, ref?: PR<T>) => {
     const {
       w = '1200px',
       padding = 'normal',
+      topBarPadding = false,
       style,
       as = 'div',
       ...rest
@@ -48,6 +52,7 @@ export const Container: PC<'div', ContainerProps> = React.forwardRef(
         ref={ref}
         as={as}
         padding={padding}
+        topBarPadding={topBarPadding}
         style={{
           [vars.width]: typeof w === 'string' ? w : `${w}px`,
           ...style,

src/styles/GlobalStyles.ts

@@ -37,7 +37,6 @@ export const SolvedGlobalStyles = createGlobalStyle<{ theme: SolvedTheme }>`
         font-family: ${({ theme }) => theme.typography.paragraph};
         font-weight: 400;
         width: 100%;
-        overflow-x: hidden;
         background: ${({ theme }) => theme.color.background.footer};
         ${({ theme }) =>
           componentGlobalStyles.map((fn) => fn(theme)).join('\n')}
@@ -47,7 +46,6 @@ export const SolvedGlobalStyles = createGlobalStyle<{ theme: SolvedTheme }>`
         margin: 0;
         width: 100%;
         line-height: 1.6;
-        overflow-x: hidden;
         color: ${({ theme }) => theme.color.text.primary.main};
         background: ${({ theme }) => theme.color.background.page};
         scrollbar-width: thin;
@@ -128,30 +126,6 @@ export const SolvedGlobalStyles = createGlobalStyle<{ theme: SolvedTheme }>`
         overflow: hidden !important;
     }
     
-    /* TODO remove named classes */
-    .contents {
-        position: relative;
-        margin: 48px auto 0px auto;
-        padding: 16px;
-        max-width: min(100vw, 1200px);
-        @media screen and (max-width: 540px) {
-            padding: 16px 12px;
-        }
-        &.no_top_margin {
-            margin-top: 0;
-        }
-        &.no-padding {
-            padding: 0;
-        }
-    }
-    
-    /* TODO remove named classes */
-    .solvedac-centering {
-        position: relative;
-        margin: 0 auto;
-        max-width: 1200px;
-    }
-
     /* TODO remove named classes */
     .bronze {
         color: #ad5600;