fix: styles

wevm · Nov 26, 2023 · b2eb71b · b2eb71b
1 parent 87d0372
commit b2eb71b
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 4 deletions.
diff --git a/src/app/components/Content.css.ts b/src/app/components/Content.css.ts
@@ -6,5 +6,5 @@ export const root = style({
   maxWidth: contentVars.width,
   overflowX: 'hidden',
   padding: `${contentVars.verticalPadding} ${contentVars.horizontalPadding}`,
-  width: contentVars.width,
+  width: '100%',
 })
diff --git a/src/app/components/Logo.css.ts b/src/app/components/Logo.css.ts
@@ -4,7 +4,7 @@ import { fontSizeVars, fontWeightVars, lineHeightVars } from '../styles/vars.css
 export const logoImage = style(
   {
     height: '30%',
-    width: 'max-content',
+    width: 'auto',
   },
   'logoImage',
 )

diff --git a/src/app/components/MobileTopNav.css.ts b/src/app/components/MobileTopNav.css.ts
@@ -151,7 +151,14 @@ export const outlinePopover = style(
   'outlinePopover',
 )
 
-export const section = style({ display: 'flex', height: '100%', gap: spaceVars[16] }, 'section')
+export const section = style(
+  {
+    display: 'flex',
+    height: '100%',
+    gap: spaceVars[16],
+  },
+  'section',
+)
 
 export const separator = style(
   {

diff --git a/src/app/components/MobileTopNav.tsx b/src/app/components/MobileTopNav.tsx
@@ -4,6 +4,7 @@ import { Link, useLocation } from 'react-router-dom'
 import type * as Config from '../../config.js'
 import { useConfig } from '../hooks/useConfig.js'
 import { Icon } from './Icon.js'
+import { Logo } from './Logo.js'
 import * as styles from './MobileTopNav.css.js'
 import { Outline } from './Outline.js'
 import { Popover } from './Popover.js'
@@ -14,7 +15,6 @@ import { Discord } from './icons/Discord.js'
 import { GitHub } from './icons/GitHub.js'
 import { Menu } from './icons/Menu.js'
 import { X } from './icons/X.js'
-import { Logo } from './Logo.js'
 
 MobileTopNav.Curtain = Curtain
 

diff --git a/src/app/layouts/DocsLayout.css.ts b/src/app/layouts/DocsLayout.css.ts
@@ -12,13 +12,15 @@ import {
 export const leftGutterWidthVar = createVar('leftGutterWidth')
 
 export const root = style({
+  overflowX: 'hidden',
   vars: {
     [leftGutterWidthVar]: `max(calc((100vw - ${contentVars.width}) / 2), ${sidebarVars.width})`,
   },
 })
 
 export const content = style(
   {
+    backgroundColor: primitiveColorVars.background,
     marginLeft: 'auto',
     marginRight: 'auto',
     maxWidth: contentVars.width,