refac: added scrollbar in today blocks

marchhq · Nov 5, 2024 · c8472b3 · c8472b3
1 parent 92cdd54
commit c8472b3
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/apps/frontend/src/components/Today/TodayPage.tsx b/apps/frontend/src/components/Today/TodayPage.tsx
@@ -18,7 +18,7 @@ const TodayPage: React.FC = () => {
   }
 
   return (
-    <main className="h-full overflow-y-hidden bg-background p-10">
+    <main className="h-full bg-background p-10">
       <section className="flex justify-between">
         <div className="">
           <header className="flex items-center justify-start">
@@ -27,22 +27,22 @@ const TodayPage: React.FC = () => {
               onDateChange={setSelectedDate}
             />
           </header>
-          <section className="my-3">
+          <section className="no-scrollbar my-3 h-[30vh] max-w-[700px] overflow-y-scroll">
             <TodayTextArea selectedDate={selectedDate} />
           </section>
-          <section className="space-y-8 text-[16px] text-secondary-foreground">
+          <section className="no-scrollbar h-[30vh] max-w-[700px] space-y-8 overflow-y-scroll text-[16px] text-secondary-foreground">
             <TodayItems selectedDate={selectedDate} />
           </section>
         </div>
-        <section className="w-[96%] max-w-[300px]">
+        <section className="w-[96%] max-w-[400px]">
           <div className="flex items-center justify-end gap-4">
             <span className="mt-2 text-[11px] font-medium text-foreground">
               show agenda
             </span>
             <ShowAgenda toggle={showAgenda} onToggle={handleToggleAgenda} />
           </div>
           {showAgenda && (
-            <div className="my-4 text-secondary-foreground">
+            <div className="h-[90vh] overflow-y-scroll text-secondary-foreground">
               <TodayMeetings selectedDate={selectedDate} />
             </div>
           )}

diff --git a/apps/frontend/src/components/TodayMeetings.tsx b/apps/frontend/src/components/TodayMeetings.tsx
@@ -128,7 +128,7 @@ export const TodayMeetings: React.FC<TodayAgendaProps> = ({ selectedDate }) => {
       {agendaItems.length === 0 ? (
         <li className="list-none">No agenda items</li>
       ) : (
-        <ol className="relative min-h-[150px] border-s border-border">
+        <ol className="relative ml-10 min-h-[150px] border-s border-border">
           {agendaItems.map((item, index) => (
             <li key={index} className="mb-8 ms-4">
               {index === 0 && (

diff --git a/apps/frontend/src/components/TodayTextArea.tsx b/apps/frontend/src/components/TodayTextArea.tsx
@@ -96,7 +96,7 @@ export const TodayTextArea = ({ selectedDate }: JournalProps): JSX.Element => {
   }, [content, hasUnsavedChanges, isLoading])
 
   return (
-    <div className="text-foreground">
+    <div className="overflow-scroll text-foreground">
       <TextEditor editor={editor} minH="30vh" />
     </div>
   )