fix: make dialog title fit within dialog on small screens

hackerspace-ntnu · Oct 29, 2024 · 22c4241 · 22c4241
1 parent 8e4944d
commit 22c4241
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/components/shift-schedule/ScheduleCell.tsx b/src/components/shift-schedule/ScheduleCell.tsx
@@ -19,7 +19,7 @@ function ScheduleCell({ messages, members }: ScheduleCellProps) {
       <DialogTrigger asChild>
         <ScheduleCellContent members={members} />
       </DialogTrigger>
-      <DialogContent className='w-1/3 min-w-80 p-3'>
+      <DialogContent className='w-1/3 min-w-80 p-3 lg:min-w-96'>
         <ScheduleCellDialog messages={messages} members={members} />
       </DialogContent>
     </Dialog>

diff --git a/src/components/shift-schedule/ScheduleCellDialog.tsx b/src/components/shift-schedule/ScheduleCellDialog.tsx
@@ -35,9 +35,9 @@ function ScheduleCellDialog({ messages, members }: ScheduleCellDialogProps) {
   return (
     <>
       <DialogHeader>
-        <DialogTitle className='space-x-5'>
+        <DialogTitle className='flex flex-col text-left lg:block lg:flex-none lg:space-x-5'>
           <span className='font-semibold text-3xl'>{messages.day}</span>
-          <span className='font-semibold text-lg'>{messages.time}</span>
+          <span className='mt-auto font-semibold text-lg'>{messages.time}</span>
         </DialogTitle>
       </DialogHeader>
       <section className='flex justify-between gap-8 px-1.5 pb-1.5'>