Fix: Mobile responsiveness audit (modals, views, sidebar) & Critical bug fixes (registration, orphan tasks)

client/src/components/ChangePasswordModal.tsx

@@ -78,7 +78,7 @@ export function ChangePasswordModal({ open, onOpenChange }: ChangePasswordModalP
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent>
+            <DialogContent className="w-[95vw] max-w-lg sm:max-w-md p-4 sm:p-6">
                 <DialogHeader>
                     <DialogTitle>{t('auth.changePassword')}</DialogTitle>
                     <DialogDescription>

client/src/components/ShareAccessModal.tsx

@@ -49,7 +49,7 @@ export function ShareAccessModal({ open, onOpenChange }: ShareAccessModalProps)
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-md">
+            <DialogContent className="w-[95vw] max-w-lg sm:max-w-md p-4 sm:p-6">
                 <DialogHeader>
                     <DialogTitle className="flex items-center gap-2">
                         <Users className="w-5 h-5" />

client/src/components/TaskCreationModal.tsx

@@ -129,7 +129,7 @@ export default function TaskCreationModal({ isOpen, onClose, onSave }: TaskCreat
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose} >
-      <DialogContent className="sm:max-w-md mx-4 max-h-[90vh] overflow-y-auto">
+      <DialogContent className="w-[95vw] max-w-lg sm:max-w-md max-h-[90vh] overflow-y-auto p-4 sm:p-6">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Plus className="w-4 h-4" />
@@ -182,7 +182,7 @@ export default function TaskCreationModal({ isOpen, onClose, onSave }: TaskCreat
             />
           </div>
 
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
             <Select value={priority} onValueChange={(value: 'low' | 'medium' | 'high') => setPriority(value)}>
               <SelectTrigger data-testid="select-task-priority">
                 <SelectValue placeholder={t('taskCreation.priority')} />

client/src/components/TaskDetailsModal.tsx

@@ -323,7 +323,7 @@ export default function TaskDetailsModal({
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="w-[95vw] max-w-lg sm:max-w-2xl max-h-[90vh] overflow-y-auto p-4 sm:p-6">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <FileText className="w-5 h-5" />

client/src/components/TasksWithCalendar.tsx

@@ -274,7 +274,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onT
             />
           </div>
 
-          <div className="flex gap-3">
+          <div className="flex flex-wrap gap-2 sm:gap-3">
             <Select value={filterBy} onValueChange={(value: FilterOption) => {
               setFilterBy(value);
               console.log('Filter changed to:', value);

client/src/components/TimeCompletionModal.tsx

@@ -20,14 +20,14 @@ export default function TimeCompletionModal({ isOpen, onClose, onSave, taskTitle
 
   const handleSave = () => {
     let totalMinutes = 0;
-    
+
     if (activeTab === 'clock') {
       totalMinutes = hours * 60 + minutes;
     } else {
       const parsedHours = parseFloat(manualHours) || 0;
       totalMinutes = Math.round(parsedHours * 60);
     }
-    
+
     onSave(totalMinutes);
     console.log(`Time logged: ${totalMinutes} minutes for task: ${taskTitle}`);
     handleClose();
@@ -58,14 +58,14 @@ export default function TimeCompletionModal({ isOpen, onClose, onSave, taskTitle
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-md mx-4">
+      <DialogContent className="w-[95vw] max-w-lg sm:max-w-md p-4 sm:p-6">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Timer className="w-4 h-4" />
             Task Completed!
           </DialogTitle>
         </DialogHeader>
-        
+
         <div className="space-y-4">
           <div className="text-center">
             <p className="text-sm text-muted-foreground mb-2">
@@ -96,7 +96,7 @@ export default function TimeCompletionModal({ isOpen, onClose, onSave, taskTitle
                     {formatTime(hours, minutes)}
                   </div>
                 </div>
-                
+
                 <div className="grid grid-cols-2 gap-4">
                   {/* Hours Picker */}
                   <div className="space-y-2">
@@ -116,7 +116,7 @@ export default function TimeCompletionModal({ isOpen, onClose, onSave, taskTitle
                       ))}
                     </div>
                   </div>
-                  
+
                   {/* Minutes Picker */}
                   <div className="space-y-2">
                     <label className="text-sm font-medium text-center block">Minutes</label>
@@ -147,7 +147,7 @@ export default function TimeCompletionModal({ isOpen, onClose, onSave, taskTitle
                     {getCurrentTimeDisplay()}
                   </div>
                 </div>
-                
+
                 <div>
                   <label className="text-sm font-medium block mb-2">Hours (decimal)</label>
                   <Input
@@ -167,17 +167,17 @@ export default function TimeCompletionModal({ isOpen, onClose, onSave, taskTitle
               </div>
             </TabsContent>
           </Tabs>
-          
+
           <div className="flex gap-3 pt-2">
-            <Button 
-              variant="outline" 
+            <Button
+              variant="outline"
               onClick={handleClose}
               className="flex-1"
               data-testid="button-cancel-time"
             >
               Cancel
             </Button>
-            <Button 
+            <Button
               onClick={handleSave}
               disabled={activeTab === 'clock' ? hours === 0 && minutes === 0 : !manualHours.trim()}
               className="flex-1"

client/src/pages/settings.tsx

@@ -142,7 +142,7 @@ const ScheduleSettings = ({ user }: { user: User }) => {
         </button>
       </div>
 
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div className="space-y-2">
           <label className="text-sm font-medium">{t('settings.schedule.start')}</label>
           <Input type="time" value={currentSchedule.start} onChange={(e) => handleChange('start', e.target.value)} />