Shrinking padding on mobile to show data better (#971)

Co-authored-by: Nathan Weinberg <[email protected]>
transitmatters · Apr 13, 2024 · 4e72d0b · 4e72d0b
1 parent 456b0f7
commit 4e72d0b
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/common/components/widgets/WidgetDiv.tsx b/common/components/widgets/WidgetDiv.tsx
@@ -8,7 +8,7 @@ interface WidgetDivProps {
 
 export const WidgetDiv: React.FC<WidgetDivProps> = ({ children, className }) => {
   return (
-    <div className={classNames(className, 'h-full rounded-lg bg-white p-4 shadow-dataBox')}>
+    <div className={classNames(className, 'h-full rounded-lg bg-white p-3 shadow-dataBox sm:p-4')}>
       {children}
     </div>
   );

diff --git a/common/layouts/DashboardLayout.tsx b/common/layouts/DashboardLayout.tsx
@@ -23,8 +23,8 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) =>
     <div className="flex flex-1 flex-col pb-24 md:pb-0 md:pl-64">
       <main className="flex-1">
         {isMobile ? <MobileHeader /> : <DesktopHeader />}
-        <div className="py-2 md:py-6">
-          <div className="h-full px-4 sm:px-6 md:px-8">
+        <div className="py-2 md:py-4">
+          <div className="h-full px-2 sm:px-4 md:px-6">
             <WidgetPage>{children}</WidgetPage>
           </div>
         </div>

diff --git a/modules/commute/alerts/Alerts.tsx b/modules/commute/alerts/Alerts.tsx
@@ -21,7 +21,7 @@ export const Alerts: React.FC<AlertsProps> = ({ title, alerts }) => {
   } = useDelimitatedRoute();
 
   const divStyle = classNames(
-    'flex flex-col rounded-md py-4 text-white shadow-dataBox w-full gap-y-2 md:max-h-[309px] md:overflow-y-auto',
+    'flex flex-col rounded-md py-3 sm:py-4 text-white shadow-dataBox w-full gap-y-2 md:max-h-[309px] md:overflow-y-auto',
     lineColorBackground[line ?? 'DEFAULT']
   );
 

diff --git a/modules/slowzones/SystemSlowZonesDetails.tsx b/modules/slowzones/SystemSlowZonesDetails.tsx
@@ -118,7 +118,7 @@ export function SystemSlowZonesDetails({ showTitle = false }: SystemSlowZonesDet
             })}
           />
         </WidgetDiv>
-        <div className="h-full rounded-lg bg-white p-4 shadow-dataBox">
+        <div className="h-full rounded-lg bg-white p-3 shadow-dataBox sm:p-4">
           <div className="flex flex-col p-4 sm:p-0 lg:flex-row">
             <WidgetTitle title={`${DirectionObject[direction]} segments`} />
             <div className="lg:ml-2">