fix: Remove erroneous horizontal overflows from various places (#837)

#833 Removes overflows in: - `<body>`, HomePage, and MLChallenge caused by `100vw` instead of `100%`. - TablePageLayout caused by `flex-shrink-0` (only when window width is mobile-sized).
chanzuckerberg · Jul 8, 2024 · c9262fa · c9262fa
1 parent e53e91c
commit c9262fa
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/frontend/packages/data-portal/app/components/Index/IndexContent.tsx b/frontend/packages/data-portal/app/components/Index/IndexContent.tsx
@@ -13,7 +13,7 @@ export function IndexContent() {
   const tomograms = data.tomograms_aggregate.aggregate?.count ?? 0
 
   return (
-    <div className="px-sds-xl w-[100vw] overflow-x-clip flex flex-col items-center">
+    <div className="px-sds-xl overflow-x-clip flex flex-col items-center">
       <div className="flex flex-col max-w-content-small py-sds-xxl gap-sds-xxl">
         <div className="flex flex-col gap-sds-xl">
           <h2 className="font-sds-semibold font-semibold text-sds-header-xl leading-sds-header-xl">

diff --git a/frontend/packages/data-portal/app/components/MLChallenge/MLChallenge.tsx b/frontend/packages/data-portal/app/components/MLChallenge/MLChallenge.tsx
@@ -6,7 +6,7 @@ import { MLChallengeNavigation } from './MLChallengeNavigation'
 
 export function MLChallenge() {
   return (
-    <div className="flex flex-col w-[100vw] overflow-x-clip">
+    <div className="flex flex-col w-full overflow-x-clip">
       <MLChallengeHeader />
 
       <div className="flex flex-row w-full justify-between px-sds-xl relative">

diff --git a/frontend/packages/data-portal/app/components/TablePageLayout.tsx b/frontend/packages/data-portal/app/components/TablePageLayout.tsx
@@ -84,7 +84,7 @@ export function TablePageLayout({
 
           <div
             className={cns(
-              'flex flex-col flex-auto flex-shrink-0 screen-2040:items-center',
+              'flex flex-col flex-auto screen-2040:items-center',
               'pt-sds-xl pb-sds-xxl',
               'border-t border-sds-gray-300',
               'overflow-x-scroll max-w-full',

diff --git a/frontend/packages/data-portal/app/root.tsx b/frontend/packages/data-portal/app/root.tsx
@@ -131,7 +131,7 @@ const Document = withEmotionCache(
             content="OmFoN8OF-Q-v6YeozSkfLTAJ2khAHkkV7ONfH4mVa5w"
           />
         </head>
-        <body className="h-screen w-screen flex flex-col flex-auto">
+        <body className="h-screen w-full flex flex-col flex-auto">
           <EnvironmentContext.Provider value={ENV}>
             <Layout>{children}</Layout>
           </EnvironmentContext.Provider>