Make padding consistent between <Header> & <Main>

pmeinhardt · May 15, 2022 · bda21ec · bda21ec
1 parent bf79bd9
commit bda21ec
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -4,10 +4,8 @@ export type Props = React.PropsWithChildren<never>;
 
 function Header({ children }: Props) {
   return (
-    <header className="bg-flamingo-in-sunset text-shadow-flamingo/20 sticky top-0 border-b border-flamingo/10 p-2 text-stone-100">
-      <div className="flex items-center justify-between gap-2 px-2">
-        {children}
-      </div>
+    <header className="bg-flamingo-in-sunset text-shadow-flamingo/20 sticky top-0 border-b border-flamingo/10 px-4 py-2 text-stone-100">
+      <div className="flex items-center justify-between gap-2">{children}</div>
     </header>
   );
 }

diff --git a/src/components/List.tsx b/src/components/List.tsx
@@ -135,7 +135,11 @@ function List({ keys }: Props) {
     <form>
       <ol>
         {slice.map((key, index) => (
-          <li key={key} ref={index === cursor ? itemRef : undefined}>
+          <li
+            key={key}
+            className="-mx-2"
+            ref={index === cursor ? itemRef : undefined}
+          >
             <div
               className={clsx(
                 "flex items-stretch border-b border-stone-200",

diff --git a/src/components/Main.tsx b/src/components/Main.tsx
@@ -3,7 +3,7 @@ import React from "react";
 export type Props = React.PropsWithChildren<never>;
 
 function Main({ children }: Props) {
-  return <main className="mb-2 p-2">{children}</main>;
+  return <main className="mb-2 px-4 py-2">{children}</main>;
 }
 
 export default Main;