fix: improve layout design for large screens #1231 (#1437)

open-sauced · Jul 31, 2023 · d8ae808 · d8ae808
1 parent d992f72
commit d8ae808
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/components/molecules/RepoRow/repo-row.tsx b/components/molecules/RepoRow/repo-row.tsx
@@ -261,14 +261,14 @@ const RepoRow = ({ repo, topic, userPage, selected, handleOnSelectRepo }: RepoPr
         </div>
 
         {/* Column: Contributors */}
-        <div className={clsx(classNames.cols.contributors, "hidden lg:flex")}>
+        <div className={clsx(classNames.cols.contributors, "hidden xl:flex")}>
           {contributorData.length! > 0 ? <StackedAvatar contributors={contributorData} /> : "-"}
 
           {contributorData.length! > 5 ? <div>&nbsp;{`+${contributorData.length - 5}`}</div> : ""}
         </div>
 
         {/* Column: Last 30 Days */}
-        <div className={clsx(classNames.cols.last30days, "hidden lg:flex")}>
+        <div className={clsx(classNames.cols.last30days, "hidden xl:flex")}>
           {repo.id && last30days ? <Sparkline data={last30days} /> : "-"}
         </div>
       </div>

diff --git a/components/organisms/Repositories/repositories.tsx b/components/organisms/Repositories/repositories.tsx
@@ -102,7 +102,7 @@ const Repositories = ({ repositories }: RepositoriesProps): JSX.Element => {
         title="Repositories"
       />
       <div className="flex flex-col w-full overflow-x-auto border rounded-lg">
-        <div className="lg:min-w-[1150px]">
+        <div>
           <div className="flex justify-between gap-2 px-6 py-4 md:hidden bg-light-slate-3">
             <div className="flex-1">
               <TableTitle> Repository </TableTitle>
@@ -133,10 +133,10 @@ const Repositories = ({ repositories }: RepositoriesProps): JSX.Element => {
             <div className={clsx(classNames.cols.spam)}>
               <TableTitle>SPAM</TableTitle>
             </div>
-            <div className={clsx(classNames.cols.contributors, "hidden lg:flex")}>
+            <div className={clsx(classNames.cols.contributors, "hidden xl:flex")}>
               <TableTitle>Contributors</TableTitle>
             </div>
-            <div className={clsx(classNames.cols.last30days, "hidden lg:flex")}>
+            <div className={clsx(classNames.cols.last30days, "hidden xl:flex")}>
               <TableTitle>Last 30 Days</TableTitle>
             </div>
           </div>