refactor: adjust grid layout for better responsiveness and fix the datepicker (CCExtractor#285)

Author: its-me-abhishek

frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx

@@ -111,24 +111,26 @@ export const AddTaskdialog = ({
           </DialogDescription>
         </DialogHeader>
         <div className="space-y-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="description" className="text-right">
+          <div className="grid grid-cols-8 items-center gap-4">
+            <Label htmlFor="description" className="text-right col-span-2">
               Description
             </Label>
-            <Input
-              id="description"
-              name="description"
-              type="text"
-              value={newTask.description}
-              onChange={(e) =>
-                setNewTask({
-                  ...newTask,
-                  description: e.target.value,
-                })
-              }
-              required
-              className="col-span-3"
-            />
+            <div className="col-span-6">
+              <Input
+                id="description"
+                name="description"
+                type="text"
+                value={newTask.description}
+                onChange={(e) =>
+                  setNewTask({
+                    ...newTask,
+                    description: e.target.value,
+                  })
+                }
+                required
+                className="col-span-6"
+              />
+            </div>
           </div>
           <div className="grid grid-cols-4 items-center gap-4">
             <Label htmlFor="priority" className="text-right">
@@ -226,20 +228,22 @@ export const AddTaskdialog = ({
               />
             </div>
           </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="description" className="text-right">
+          <div className="grid grid-cols-8 items-center gap-4">
+            <Label htmlFor="tags" className="text-right col-span-2">
               Tags
             </Label>
-            <Input
-              id="tags"
-              name="tags"
-              placeholder="Add a tag"
-              value={tagInput}
-              onChange={(e) => setTagInput(e.target.value)}
-              onKeyDown={(e) => e.key === 'Enter' && handleAddTag()}
-              required
-              className="col-span-3"
-            />
+            <div className="col-span-6">
+              <Input
+                id="tags"
+                name="tags"
+                placeholder="Add a tag"
+                value={tagInput}
+                onChange={(e) => setTagInput(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleAddTag()}
+                required
+                className="col-span-6"
+              />
+            </div>
           </div>
 
           <div className="mt-2">
@@ -263,19 +267,21 @@ export const AddTaskdialog = ({
               </div>
             )}
           </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="annotations" className="text-right">
-              Annotations
+          <div className="grid grid-cols-8 items-center gap-4">
+            <Label htmlFor="annotations" className="text-right col-span-2">
+              Annotation
             </Label>
-            <Input
-              id="annotations"
-              name="annotations"
-              placeholder="Add an annotation"
-              value={annotationInput}
-              onChange={(e) => setAnnotationInput(e.target.value)}
-              onKeyDown={(e) => e.key === 'Enter' && handleAddAnnotation()}
-              className="col-span-3"
-            />
+            <div className="col-span-6">
+              <Input
+                id="annotations"
+                name="annotations"
+                placeholder="Add an annotation"
+                value={annotationInput}
+                onChange={(e) => setAnnotationInput(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleAddAnnotation()}
+                className="col-span-6"
+              />
+            </div>
           </div>
 
           <div className="mt-2">

frontend/src/components/HomeComponents/Tasks/Tasks.tsx

@@ -918,7 +918,7 @@ export const Tasks = (
                       className="hidden sm:flex min-w-[140px]"
                       icon={<Key lable="t" />}
                     />
-                    <div className="pr-2">
+                    <div className="flex justify-center">
                       <AddTaskdialog
                         isOpen={isAddTaskOpen}
                         setIsOpen={setIsAddTaskOpen}

frontend/src/components/ui/date-picker.tsx

@@ -23,7 +23,7 @@ export function DatePicker({
   className,
 }: DatePickerProps) {
   return (
-    <Popover>
+    <Popover modal={true}>
       <PopoverTrigger asChild>
         <Button
           variant={'outline'}