feat: Add mobile responsiveness to organisms and dashboard

components/atoms/Card/card.tsx

@@ -7,7 +7,7 @@ interface CardProps {
 
 const Card: React.FC<CardProps> = ({ className, children }) => {
   return (
-    <div className={`${className && className} block p-6 bg-white rounded-lg border border-gray-200 shadow-md`}>
+    <div className={`${className && className} block p-6 bg-white rounded-lg border border-slate-300`}>
       {children}
     </div>
   );

components/molecules/AuthSection/auth-section.tsx

@@ -10,11 +10,11 @@ import { Divider } from "@supabase/ui";
 const AuthSection: React.FC = () => {
   return (
     <div className="flex">
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-2 lg:gap-3">
         <OnboardingButton />
         <Divider type="vertical" className="!h-6 !bg-gray-600"></Divider>
         <Image alt="Notification Icon" src={notifications} />
-        <div className="flex gap-2">
+        <div className="flex gap-2 lg:gap-2">
           <Avatar alt="User Avatar" avatarURL={userAvatar} size={"base"} hasBorder={true} />
           <Image alt="Down Arrow" src={downArrow}/>
         </div>

components/molecules/HeaderLogo/header-logo.tsx

@@ -7,7 +7,7 @@ const HeaderLogo: React.FC = () => {
   return (
     <div className="flex items-center p-2">
       <Image className="rounded" alt="Open Sauced Logo" width={32} height={32} src={openSaucedImg} />
-      <Text className="font-semibold px-2 text-[16px] !text-white">OpenSauced</Text>
+      <Text className="font-semibold px-2 text-[16px] hidden xs:block !text-white">OpenSauced</Text>
     </div>
   );
 };

components/molecules/HighlightCard/highlight-card.tsx

@@ -7,6 +7,7 @@ import thumbsIcon from "../../../public/icons/icon-thumbs-down--yellow.svg";
 import metricArrow from "../../../public/icons/metric-arrow.svg";
 
 interface HighlightCardProps {
+    className?: string;
     label?: string;
     icon?: "participation" | "accepted-pr" | "unlabeled-pr" | "spam";
     metricIncreases: boolean;
@@ -38,9 +39,9 @@ const icons = {
   }
 };
 
-const HighlightCard: React.FC<HighlightCardProps> = ({ label, icon, metricIncreases, increased, numChanged, percentage, percentageLabel }) => {
+const HighlightCard: React.FC<HighlightCardProps> = ({ className, label, icon, metricIncreases, increased, numChanged, percentage, percentageLabel }) => {
   return (
-    <div className="flex flex-col bg-white border border-slate-300 rounded-lg min-w-[316px] max-w-md h-auto p-2">
+    <div className={`${className && className} flex flex-col bg-white border border-slate-300 rounded-lg min-w-[316px] max-w-md h-auto p-2`}>
       {/* Top Information */}
       <div className="flex justify-between w-full p-1">
         {/* Label */}

components/molecules/SelectableTable/selectable-table.tsx

@@ -6,6 +6,7 @@ import StarIcon from "public/icons/star-icon.svg";
 import Person from "public/icons/person.svg";
 import Icon3 from "public/icons/icon3.svg";
 import ComponentHeader from "../ComponentHeader/component-header";
+import { truncateString } from "../../../lib/funcs/truncate-string";
 
 type ParticipantsRow = {
   title: string;
@@ -60,9 +61,9 @@ const SelectableTable: React.FC<SelectableTableProps> = ({ title, tableType, row
             <tr className="h-3"></tr>
             {rows?.map((row, index) => {
               return (
-                <tr key={index}>
+                <tr className={`hover:content-['${row.title}']`} key={index}>
                   <td className="flex flex-row text-left p-2">
-                    <Checkbox label=""/> {row.title}
+                    <Checkbox label=""/> {window.innerWidth < 425 ? truncateString(row.title, 3) : row.title}
                   </td>
                   <td className="text-right p-2">
                     {row.stars}%

components/organisms/ToolsDisplay/tools-display.tsx

@@ -15,17 +15,19 @@ const Tool: React.FC = () => {
     <div className="flex flex-col w-full">
       {tool === "Dashboard" ?
         <>
-          <div className="flex justify-between max-w-full mb-10">
-            <HighlightCard 
+          <div className="flex flex-col items-center lg:flex-row max-w-full mb-10">
+            <HighlightCard
+              className="mb-4 lg:mb-0 lg:mr-3 lg:min-w-[24.3%]"
               label="Participation"
               icon="participation"
               metricIncreases={true}
               increased={true}
               numChanged={38}
-              percentage={42}
+              percentage={40}
               percentageLabel="of 49,999"
             />
-            <HighlightCard 
+            <HighlightCard
+              className="mb-4 lg:mb-0 lg:mr-3 lg:min-w-[24.3%]"
               label="Spam"
               icon="spam"
               metricIncreases={false}
@@ -34,43 +36,45 @@ const Tool: React.FC = () => {
               percentage={80}
               percentageLabel="of 49,999"
             />
-            <HighlightCard 
+            <HighlightCard
+              className="mb-4 lg:mb-0 lg:mr-3 lg:min-w-[24.3%]"
               label="Accepted PRs"
               icon="accepted-pr"
               metricIncreases={true}
               increased={false}
               numChanged={38}
-              percentage={42}
+              percentage={37}
               percentageLabel="of 49,999"
             />
-            <HighlightCard 
+            <HighlightCard
+              className="mb-4 lg:mb-0 lg:min-w-[24.3%]"
               label="Unlabeled PRs"
               icon="unlabeled-pr"
               metricIncreases={false}
               increased={false}
-              numChanged={98}
-              percentage={80}
+              numChanged={85}
+              percentage={77}
               percentageLabel="of 49,999"
             />
           </div>
-          <div className="flex max-w-full mb-10">
-            <div className="flex flex-col w-[60%] mr-10">
+          <div className="flex flex-col lg:flex-row max-w-full mb-10">
+            <div className="flex flex-col w-full lg:w-[50%] xl:!w-[60%] mr-10">
               <Card className="w-full mb-10 p-5">
                 <ScatterChart title="Test Title" option={testOptions} />
               </Card>
               <Card className="w-full mb-10 p-5">
                 <ScatterChart title="Test Title" option={testOptions} />
               </Card>
-              <div className="flex w-full h-[500px]">
-                <Card className="w-[50%] mr-10 h-full p-5">
+              <div className="flex flex-col 2xl:flex-row w-full h-auto">
+                <Card className="w-full mb-10 2xl:mb-0 2xl:w-[49%] xl:mr-4 h-full px-1 md:px-5 py-5">
                   <SelectableTable rows={testRows} title="Test Title" tableType="participants" />
                 </Card>
-                <Card className="w-[50%] h-full p-5">
+                <Card className="w-full mb-10 2xl:mb-0 2xl:w-[49%] h-full px-1 md:px-5 py-5">
                   <SelectableTable rows={testRows} title="Test Title" tableType="participants" />
                 </Card>
               </div>
             </div>
-            <Card className="w-[40%] p-5">
+            <Card className="w-full lg:w-[50%] xl:!w-[40%] px-1 md:px-5 py-5">
               <SelectableTable rows={extendedTestRows} title="Test Title" tableType="participants" />
             </Card>
           </div>

components/organisms/TopNav/top-nav.tsx

@@ -4,7 +4,7 @@ import HeaderLogo from "../../molecules/HeaderLogo/header-logo";
 
 const TopNav: React.FC = () => {
   return (
-    <div className="top-nav-container flex justify-between items-center px-16 py-0.5 bg-zinc-900 border-b">
+    <div className="top-nav-container flex justify-between items-center pr-1 md:px-16 py-0.5 bg-zinc-900 border-b">
       <HeaderLogo />
       <AuthSection />
     </div>

components/organisms/header/header.tsx

@@ -12,7 +12,7 @@ const Header: React.FC = () => {
   const { filterorg } = router.query;
 
   return (
-    <header className="header flex flex-row pt-[24px] px-[64px] bg-slate-50">
+    <header className="header flex flex-col md:flex-row pt-6 px-4 md:px-16 bg-slate-50">
       <div className="header-image mr-2 p-2 min-w-[130px]">
         <ContextThumbnail 
           size={120} ContextThumbnailURL={Thumbnail.src}></ContextThumbnail>

components/organisms/toolist/nav.tsx

@@ -21,7 +21,7 @@ const Nav: React.FC<NavProps> = ({ toolList, selectedTool, portalName }) => {
       aria-orientation="horizontal"
       aria-label="Browse the tools"
       tabIndex={0}
-      className="tool-list-nav flex flex-row gap-2 px-16 bg-slate-50 border-b pt-3">
+      className="tool-list-nav flex w-[100vw] overflow-x-auto overflow-y-hidden gap-2 px-4 md:px-16 bg-slate-50 border-b pt-3">
 
       {toolList.map((tool, index) => 
         <div
@@ -36,7 +36,7 @@ const Nav: React.FC<NavProps> = ({ toolList, selectedTool, portalName }) => {
               `${portalName}?tool=${tool.name}`
             }
           >
-            <Button size="xlarge" type="text" className={`!px-4 hover:!bg-slate-100 after:block after:absolute after:inset-x-0 after:-bottom-0.5 after:h-0.5 after:rounded-lg ${selectedTool === tool.name ? "after:bg-orange-500" : "focus:after:bg-slate-400"} focus:bg-slate-100 focus:ring-slate-300 child:flex child:items-center`}>
+            <Button size="xlarge" type="text" className={`!px-2 md:!px-4  hover:!bg-slate-100 after:block after:absolute after:inset-x-0 after:-bottom-0.5 after:h-0.5 after:rounded-lg ${selectedTool === tool.name ? "after:bg-orange-500" : "focus:after:bg-slate-400"} focus:bg-slate-100 focus:ring-slate-300 child:flex child:items-center`}>
               <span className={"text-base whitespace-nowrap " + (selectedTool === tool.name ? "text-slate-900" : "text-slate-500")}>
                 {tool.name}
               </span>

jest.config.js

@@ -0,0 +1,12 @@
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+  dir: "./"
+});
+
+const customJestConfig = {
+  moduleDirectories: ["node_modules", "<rootDir>/"]
+  /* testEnvironment: "jest-environment-jsdom" */
+};
+
+module.exports = createJestConfig(customJestConfig);

layouts/portal.tsx

@@ -22,7 +22,7 @@ const PortalLayout = ({children}: {children: React.ReactNode}) => {
           />
         </div>
 
-        <main className="flex w-full flex-1 flex-col items-center justify-center text-center px-[64px] pt-8 pb-6">
+        <main className="flex w-full flex-1 flex-col items-center justify-center text-center px-3 md:px-16 pt-8 pb-6">
           {children}
         </main>
       </div>

lib/funcs/truncate-string.ts

@@ -0,0 +1,6 @@
+export function truncateString(str: string, num: number) {
+  if (str.length <= num) {
+    return str;
+  }
+  return str.slice(0, num) + "...";
+};