fix display on smaller screen

MaastrichtU-IDS · Mar 27, 2024 · e07b5d6 · e07b5d6
1 parent 5c2d94c
commit e07b5d6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/frontend/src/components/VariablesList.tsx b/frontend/src/components/VariablesList.tsx
@@ -131,8 +131,8 @@ const VariablesList = ({cohortId, searchFilters = {searchQuery: ''}}: any) => {
   // };
 
   return (
-    <main className="flex">
-      <aside className="pr-4 text-center flex flex-col items-center min-w-fit">
+    <main className="flex w-full space-x-4">
+      <aside className="flex-shrink-0 text-center flex flex-col items-center min-w-fit">
         {Object.keys(cohortsData[cohortId]['variables']).length > 0 &&
         (!dataCleanRoom.cohorts[cohortId] ||
           dataCleanRoom.cohorts[cohortId].length !== Object.keys(cohortsData[cohortId]['variables']).length) ? (
@@ -200,16 +200,16 @@ const VariablesList = ({cohortId, searchFilters = {searchQuery: ''}}: any) => {
       </aside>
 
       {/* List of variables */}
-      <div className="w-full">
+      <div className="flex">
         {cohortsData[cohortId].study_objective && (
           <div className="card p-3 mb-3 bg-base-300">🎯 Study objective: {cohortsData[cohortId].study_objective}</div>
         )}
-        <div className="variable-list space-y-2">
+        <div className="space-y-2">
           {filteredVars?.map((variable: any) => (
             <div key={variable.var_name} className="card card-compact card-bordered bg-base-100 shadow-xl">
               <div className="card-body">
-                <div className="flex">
-                  <div className="flex grow items-center space-x-3">
+                <div className="flex justify-between">
+                  <div className="flex flex-wrap items-center space-x-3">
                     <h2 className="font-bold text-lg">{variable.var_name}</h2>
                     {/* Badges for units and categorical variable */}
                     <span className="badge badge-ghost">{variable.var_type}</span>
@@ -242,7 +242,7 @@ const VariablesList = ({cohortId, searchFilters = {searchQuery: ''}}: any) => {
                     >
                       <InfoIcon />
                     </button>
-                    <div className="grow"></div>
+                    {/* <div className="grow"></div> */}
                   </div>
                   {!dataCleanRoom.cohorts[cohortId]?.includes(variable.var_name) ? (
                     <button

diff --git a/frontend/src/pages/cohorts.tsx b/frontend/src/pages/cohorts.tsx
@@ -37,8 +37,8 @@ export default function CohortsList() {
   }, [searchQuery, selectedDataTypes, selectedStudyTypes, selectedInstitutes, cohortsData]);
 
   return (
-    <main className="w-full p-4 bg-base-200 flex h-full min-h-screen">
-      <aside className="p-4 w-1/4">
+    <main className="flex w-full p-4 bg-base-200 h-full min-h-screen space-x-4">
+      <aside className="flex-shrink-0 w-64 flex flex-col">
         <div className="text-center mb-2">
           {filteredCohorts.length == Object.keys(cohortsData).length ? (
             <span className="badge badge-outline">{Object.keys(cohortsData).length} cohorts</span>
@@ -73,7 +73,7 @@ export default function CohortsList() {
         {/* TODO: add by ongoing? */}
       </aside>
 
-      <div className="w-full">
+      <div>
         <div className="mb-4">
           <input
             type="text"
@@ -101,7 +101,7 @@ export default function CohortsList() {
             >
               <input type="checkbox" />
               <div className="collapse-title">
-                <div className="gap-2">
+                <div className="flex flex-wrap items-center gap-2">
                   {cohortData.cohort_id}
                   <span className="badge badge-outline mx-2">{cohortData.institution}</span>
                   {cohortData.study_type && <span className="badge badge-ghost mx-1">{cohortData.study_type}</span>}