fix: now the repository insights pages header looks good on smaller screens

components/Workspaces/TrackedRepoWizard/TrackedRepoWizardLayout.tsx

@@ -19,7 +19,7 @@ export const TrackedRepoWizardLayout = ({
   children,
 }: TrackedRepoWizardLayoutProps) => {
   return (
-    <Card className="!p-0 sm:w-96 md:w-max max-w-3xl">
+    <Card className="!p-0 sm:w-96 md:w-max max-w-3xl mx-1">
       {/* Using !p-0 for now as the Card component has explicit padding of p-3. We can revisit. */}
       <section className="flex w-full justify-between">
         <button

components/Workspaces/TrackedReposTable.tsx

@@ -20,7 +20,7 @@ export const EmptyState = ({ onAddRepos, disabled }: { onAddRepos: () => void; d
   return (
     <div className="grid place-content-center gap-5 my-8">
       <BiBarChartAlt2 className="border rounded-lg p-2 w-11 h-11 mx-auto fill-slate-600 shadow-xs" />
-      <div className="grid w-max max-w-sm mx-auto">
+      <div className="grid lg:w-max max-w-sm mx-auto px-2">
         <span className="text-center font-medium mb-2">Add repositories to track</span>
         <p className="text-sm text-slate-600 text-center">
           Search and select the repositories you want to track and get insights on your entire GitHub ecosystem
@@ -57,7 +57,7 @@ export const TrackedReposTable = ({
 }: TrackedReposTableProps) => {
   return (
     <div className="grid gap-4">
-      <div className="flex justify-between">
+      <div className="flex justify-between flex-wrap gap-2">
         <div>
           <h2 className="flex gap-1 font-medium mb-2 text-md">Repositories Tracked</h2>
           <p className="text-sm text-slate-600">Select the organizations or repositories you want to track</p>

components/atoms/Toast/toast.tsx

@@ -28,7 +28,7 @@ const Toast = React.forwardRef<
   return (
     <ToastPrimitives.Root
       ref={ref}
-      className={clsx(className, "bg-light-slate-2 rounded-lg border border-light-slate-6 p-2 text-center")}
+      className={clsx(className, "bg-light-slate-2 rounded-lg border border-light-slate-6 p-2 text-center m-1")}
       {...props}
     />
   );

components/molecules/InsightHeader/insight-header.tsx

@@ -17,6 +17,7 @@ import { setQueryParams } from "lib/utils/query-params";
 import StackedOwners from "components/Workspaces/StackedOwners";
 import { shortenUrl } from "lib/utils/shorten-url";
 import { writeToClipboard } from "lib/utils/write-to-clipboard";
+import { useMediaQuery } from "lib/hooks/useMediaQuery";
 import CardRepoList from "../CardRepoList/card-repo-list";
 import ComponentDateFilter from "../ComponentDateFilter/component-date-filter";
 
@@ -49,6 +50,8 @@ const InsightHeader = ({
   const [isInsightUpgradeModalOpen, setIsInsightUpgradeModalOpen] = useState(false);
   const { toast } = useToast();
   const posthog = usePostHog();
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const size = isMobile ? 80 : 120;
 
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -71,12 +74,58 @@ const InsightHeader = ({
   };
 
   return (
-    <div className="relative flex flex-row justify-between w-full">
-      <div className="flex flex-col md:flex-row ">
-        <div className="header-image mr-2 p-2 min-w-[130px]">
-          <ContextThumbnail size={120} ContextThumbnailURL={""}></ContextThumbnail>
+    <>
+      <div className="grid gap-2 w-full">
+        <div className="relative flex justify-between">
+          <div className="grid md:flex">
+            <div className="header-image mr-2 p-2 min-w-[130px]">
+              <ContextThumbnail size={size} ContextThumbnailURL={""} />
+            </div>
+            <div className="md:flex md:flex-col md:justify-center p-2 header-info grow hidden">
+              <div className="flex gap-2">
+                <Title level={1} className="!text-2xl font-semibold text-slate-900">
+                  {(insight && truncateString(insight.name, 30)) || "Insights"}
+                </Title>
+              </div>
+              <div className="flex items-center gap-2 mt-4">
+                {owners && (
+                  <div className="flex gap-2 items-center">
+                    <StackedOwners owners={owners} /> |
+                  </div>
+                )}
+                {insight && insight.repos && insight.repos.length > 0 && (
+                  <CardRepoList limit={2} repoList={repoList} total={repoMeta.itemCount} />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              onClick={() => handleCopyToClipboard(insightPageLink)}
+              className="px-6 py-2 bg-white w-max"
+              variant="text"
+            >
+              <FiCopy className="mt-1 mr-2" /> Share
+            </Button>
+            {canEdit && (
+              <Button
+                className="text-xs w-max"
+                variant="primary"
+                onClick={() => {
+                  if (overLimit) {
+                    setIsInsightUpgradeModalOpen(true);
+                    return;
+                  }
+
+                  router.push(`/workspaces/${workspaceId}/repository-insights/${insightId}/edit`);
+                }}
+              >
+                <FaEdit className="mr-2" /> Edit
+              </Button>
+            )}
+          </div>
         </div>
-        <div className="flex flex-col justify-center p-2 header-info grow">
+        <div className="flex flex-col justify-center p-2 header-info grow md:hidden">
           <div className="flex gap-2">
             <Title level={1} className="!text-2xl font-semibold text-slate-900">
               {(insight && truncateString(insight.name, 30)) || "Insights"}
@@ -93,50 +142,25 @@ const InsightHeader = ({
             )}
           </div>
         </div>
-      </div>
-      <div className="flex gap-2 items-center">
-        <Button
-          onClick={() => handleCopyToClipboard(insightPageLink)}
-          className="px-6 py-2 bg-white w-max"
-          variant="text"
-        >
-          <FiCopy className="mt-1 mr-2" /> Share
-        </Button>
-        {canEdit && (
-          <Button
-            className="text-xs w-max"
-            variant="primary"
-            onClick={() => {
-              if (overLimit) {
-                setIsInsightUpgradeModalOpen(true);
-                return;
-              }
-
-              router.push(`/workspaces/${workspaceId}/repository-insights/${insightId}/edit`);
-            }}
-          >
-            <FaEdit className="mr-2" /> Edit
-          </Button>
-        )}
-        <div className=" md:hidden mt-auto">
+        <div className=" md:hidden mt-auto flex justify-end">
           <ComponentDateFilter
             setRangeFilter={(selectedRange) => {
               setQueryParams({ range: `${selectedRange}` });
             }}
             defaultRange={Number(range)}
           />
         </div>
+        {workspaceId && (
+          <InsightUpgradeModal
+            workspaceId={workspaceId}
+            variant="all"
+            isOpen={isInsightUpgradeModalOpen}
+            onClose={() => setIsInsightUpgradeModalOpen(false)}
+            overLimit={0}
+          />
+        )}
       </div>
-      {workspaceId && (
-        <InsightUpgradeModal
-          workspaceId={workspaceId}
-          variant="all"
-          isOpen={isInsightUpgradeModalOpen}
-          onClose={() => setIsInsightUpgradeModalOpen(false)}
-          overLimit={0}
-        />
-      )}
-    </div>
+    </>
   );
 };
 

components/organisms/Contributors/contributors.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { LuFileText } from "react-icons/lu";
 
@@ -44,7 +44,11 @@ const Contributors = ({ repositories, title, defaultLayout = "list" }: Contribut
   const [selectedListIds, setSelectedListIds] = useState<string[]>([]);
   const [popoverOpen, setPopoverOpen] = useState(false);
 
-  const isMobile = useMediaQuery("(max-width: 768px)");
+  const isMobile = useMediaQuery("(max-width: 576px)");
+
+  useLayoutEffect(() => {
+    setLayout(isMobile ? "grid" : defaultLayout);
+  }, [isMobile]);
 
   const onSelectContributor = (state: boolean, contributor: DbPRContributor) => {
     if (state) {