fix: Fix CSS inconsistency in Contributor Highlights for "Home" and "…

…Following" tabs for `/feed` route (#1783)
open-sauced · Oct 12, 2023 · ad08c16 · ad08c16
1 parent 397570d
commit ad08c16
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 7 deletions.
diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
@@ -435,7 +435,7 @@ const ContributorHighlightCard = ({
   }, []);
 
   return (
-    <article className="flex flex-col  md:max-w-[40rem] flex-1 gap-3 lg:gap-6">
+    <article className="w-full flex flex-col flex-1 gap-3 md:max-w-[40rem] lg:gap-6 lg:max-w-[29rem] 2xl:max-w-[34rem]">
       <div>
         <div className={clsx("flex items-center mb-4 gap-1 text-light-slate-11", title && "mb-2")}>
           {icon}

diff --git a/components/organisms/FollowersHighlightWrapper/following-highlight-wrapper.tsx b/components/organisms/FollowersHighlightWrapper/following-highlight-wrapper.tsx
@@ -58,7 +58,7 @@ const FollowingHighlightWrapper = ({ emojis, selectedFilter }: HighlightWrapperP
                   </span>
                 </Link>
               </div>
-              <div className="p-4 py-6 border bg-light-slate-1 md:px-6 lg:px-12 rounded-xl">
+              <div className="w-full p-4 border bg-light-slate-1 md:px-6 lg:px-9 lg:py-5 lg:max-w-[33rem] sm:py-3 xs:py-2 rounded-xl">
                 <ContributorHighlightCard
                   emojis={emojis}
                   refreshCallBack={mutate}

diff --git a/components/organisms/HomeHighlightsWrapper/home-highlights-wrapper.tsx b/components/organisms/HomeHighlightsWrapper/home-highlights-wrapper.tsx
@@ -47,7 +47,7 @@ const HomeHighlightsWrapper = ({ emojis, highlights, loading, mutate }: HomeHigh
                   </span>
                 </Link>
               </div>
-              <div className="p-4 border bg-light-slate-1 md:px-6 lg:px-9 lg:py-5 sm:py-3 xs:py-2 rounded-xl">
+              <div className="w-full p-4 border bg-light-slate-1 md:px-6 lg:px-9 lg:py-5 lg:max-w-[33rem] sm:py-3 xs:py-2 rounded-xl">
                 <ContributorHighlightCard
                   emojis={emojis}
                   refreshCallBack={mutate}

diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx
@@ -294,7 +294,7 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
             </DialogContent>
           </Dialog>
         )}
-        <Tabs onValueChange={onTabChange} defaultValue="home" className="grow">
+        <Tabs onValueChange={onTabChange} defaultValue="home" className="w-full 2xl:max-w-[40rem] xl:max-w-[33rem]">
           <TabsList className={clsx("justify-start  w-full border-b", !user && "hidden")}>
             <TabsTrigger
               className="data-[state=active]:border-sauced-orange data-[state=active]:border-b-2 text-lg"

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,6 @@
 const plugin = require("tailwindcss/plugin");
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
@@ -7,15 +9,17 @@ module.exports = {
     "./stories/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
+    screens: {
+      xs: "425px",
+      // => @media (min-width: 425px) { ... }
+      ...defaultTheme.screens,
+    },
     extend: {
       gridTemplateColumns: {
         autodesktop: "repeat(auto-fit, minmax(410px, 1fr))",
         automobile: "repeat(auto-fit, minmax(300px, 1fr))",
       },
       screens: {
-        xs: "425px",
-        // => @media (min-width: 425px) { ... }
-
         "2xl": "1440px",
         // => @media (min-width: 1440px) { ... }
       },