From c65ea55a01db5e79934dc0bc5cb93cf0bf2585e0 Mon Sep 17 00:00:00 2001
From: Chris Veleris <chrisveleris@gmail.com>
Date: Wed, 23 Jul 2025 16:27:05 +0300
Subject: [PATCH] Improve modals rounded corners

---
 frontend/components/Area/AreaModal.tsx            |  6 +++---
 frontend/components/Inbox/InboxItemDetail.tsx     | 15 +++++++++++----
 frontend/components/Note/NoteModal.tsx            |  6 +++---
 frontend/components/Project/ProjectModal.tsx      |  6 +++---
 frontend/components/Tag/TagModal.tsx              |  4 ++--
 .../components/Task/TaskForm/TaskTitleSection.tsx |  2 +-
 frontend/components/Task/TaskModal.tsx            |  4 ++--
 frontend/components/Task/TimelinePanel.tsx        |  2 +-
 8 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/components/Area/AreaModal.tsx b/frontend/components/Area/AreaModal.tsx
index d4a398b..b22c895 100644
--- a/frontend/components/Area/AreaModal.tsx
+++ b/frontend/components/Area/AreaModal.tsx
@@ -164,7 +164,7 @@ const AreaModal: React.FC<AreaModalProps> = ({
                 >
                     <div className="flex flex-col h-full sm:min-h-[400px] sm:max-h-[90vh]">
                         {/* Main Form Section */}
-                        <div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800">
+                        <div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-lg">
                             <div className="flex-1 relative">
                                 <div
                                     className="absolute inset-0 overflow-y-auto overflow-x-hidden"
@@ -176,7 +176,7 @@ const AreaModal: React.FC<AreaModalProps> = ({
                                     >
                                         <fieldset className="h-full flex flex-col">
                                             {/* Area Title Section - Always Visible */}
-                                            <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4">
+                                            <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4 sm:rounded-t-lg">
                                                 <input
                                                     ref={nameInputRef}
                                                     type="text"
@@ -221,7 +221,7 @@ const AreaModal: React.FC<AreaModalProps> = ({
                             </div>
 
                             {/* Action Buttons - Below border with custom layout */}
-                            <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
+                            <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-b-lg">
                                 {/* Left side: Delete and Cancel */}
                                 <div className="flex items-center space-x-3">
                                     {area &&
diff --git a/frontend/components/Inbox/InboxItemDetail.tsx b/frontend/components/Inbox/InboxItemDetail.tsx
index 9f54cad..4a87a79 100644
--- a/frontend/components/Inbox/InboxItemDetail.tsx
+++ b/frontend/components/Inbox/InboxItemDetail.tsx
@@ -20,7 +20,7 @@ interface InboxItemDetailProps {
     item: InboxItem;
     onProcess: (id: number) => void;
     onDelete: (id: number) => void;
-    onUpdate?: (id: number, content: string) => Promise<void>;
+    onUpdate?: (id: number) => Promise<void>;
     openTaskModal: (task: Task, inboxItemId?: number) => void;
     openProjectModal: (project: Project | null, inboxItemId?: number) => void;
     openNoteModal: (note: Note | null, inboxItemId?: number) => void;
@@ -401,9 +401,16 @@ const InboxItemDetail: React.FC<InboxItemDetailProps> = ({
         >
             <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-4 py-2 gap-2">
                 <div className="flex-1">
-                    <p className="text-base font-medium text-gray-900 dark:text-gray-300 break-words">
+                    <button
+                        onClick={() => {
+                            if (onUpdate && item.id !== undefined) {
+                                onUpdate(item.id);
+                            }
+                        }}
+                        className="text-base font-medium text-gray-900 dark:text-gray-300 break-words text-left cursor-pointer w-full"
+                    >
                         {cleanedContent || item.content}
-                    </p>
+                    </button>
 
                     {/* Tags and Projects display - TaskHeader style */}
                     {(hashtags.length > 0 || projectRefs.length > 0) && (
@@ -498,7 +505,7 @@ const InboxItemDetail: React.FC<InboxItemDetailProps> = ({
                     <button
                         onClick={() => {
                             if (onUpdate && item.id !== undefined) {
-                                onUpdate(item.id, item.content);
+                                onUpdate(item.id);
                             }
                         }}
                         className={`p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-opacity ${isHovered ? 'opacity-100' : 'opacity-0'}`}
diff --git a/frontend/components/Note/NoteModal.tsx b/frontend/components/Note/NoteModal.tsx
index bc1af28..b056ee5 100644
--- a/frontend/components/Note/NoteModal.tsx
+++ b/frontend/components/Note/NoteModal.tsx
@@ -363,7 +363,7 @@ const NoteModal: React.FC<NoteModalProps> = ({
                     >
                         <div className="flex flex-col h-full sm:min-h-[800px] sm:max-h-[90vh]">
                             {/* Main Form Section */}
-                            <div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800">
+                            <div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-lg">
                                 <div className="flex-1 relative">
                                     <div
                                         className="absolute inset-0 overflow-y-auto overflow-x-hidden"
@@ -380,7 +380,7 @@ const NoteModal: React.FC<NoteModalProps> = ({
                                         >
                                             <fieldset className="h-full flex flex-col">
                                                 {/* Note Title Section - Always Visible */}
-                                                <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4">
+                                                <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4 sm:rounded-t-lg">
                                                     <input
                                                         ref={titleInputRef}
                                                         type="text"
@@ -621,7 +621,7 @@ const NoteModal: React.FC<NoteModalProps> = ({
                                 </div>
 
                                 {/* Action Buttons - Below border with custom layout */}
-                                <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
+                                <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-b-lg">
                                     {/* Left side: Delete and Cancel */}
                                     <div className="flex items-center space-x-3">
                                         {note && note.id && onDelete && (
diff --git a/frontend/components/Project/ProjectModal.tsx b/frontend/components/Project/ProjectModal.tsx
index 266c0be..9ad8468 100644
--- a/frontend/components/Project/ProjectModal.tsx
+++ b/frontend/components/Project/ProjectModal.tsx
@@ -426,7 +426,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
                 >
                     <div className="flex flex-col h-full sm:min-h-[500px] sm:max-h-[80vh]">
                         {/* Main Form Section */}
-                        <div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800">
+                        <div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-lg">
                             <div className="flex-1 relative">
                                 <div
                                     className="absolute inset-0 overflow-y-auto overflow-x-hidden"
@@ -441,7 +441,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
                                     >
                                         <fieldset className="h-full flex flex-col">
                                             {/* Project Title Section - Always Visible */}
-                                            <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4">
+                                            <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4 sm:rounded-t-lg">
                                                 <input
                                                     ref={nameInputRef}
                                                     type="text"
@@ -825,7 +825,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
                             </div>
 
                             {/* Action Buttons - Below border with custom layout */}
-                            <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
+                            <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-b-lg">
                                 {/* Left side: Delete and Cancel */}
                                 <div className="flex items-center space-x-3">
                                     {project && project.id && onDelete && (
diff --git a/frontend/components/Tag/TagModal.tsx b/frontend/components/Tag/TagModal.tsx
index ce57f05..bff2773 100644
--- a/frontend/components/Tag/TagModal.tsx
+++ b/frontend/components/Tag/TagModal.tsx
@@ -159,7 +159,7 @@ const TagModal: React.FC<TagModalProps> = ({
                 >
                     <div className="flex flex-col h-auto">
                         {/* Main Form Section */}
-                        <div className="bg-white dark:bg-gray-800">
+                        <div className="bg-white dark:bg-gray-800 sm:rounded-t-lg">
                             <form
                                 onSubmit={(e) => {
                                     e.preventDefault();
@@ -189,7 +189,7 @@ const TagModal: React.FC<TagModalProps> = ({
                         </div>
 
                         {/* Action Buttons - Below border with custom layout */}
-                        <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
+                        <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-b-lg">
                             {/* Left side: Delete and Cancel */}
                             <div className="flex items-center space-x-3">
                                 {tag && tag.id && onDelete && (
diff --git a/frontend/components/Task/TaskForm/TaskTitleSection.tsx b/frontend/components/Task/TaskForm/TaskTitleSection.tsx
index 84d7a68..f7c814c 100644
--- a/frontend/components/Task/TaskForm/TaskTitleSection.tsx
+++ b/frontend/components/Task/TaskForm/TaskTitleSection.tsx
@@ -26,7 +26,7 @@ const TaskTitleSection: React.FC<TaskTitleSectionProps> = ({
     const { t } = useTranslation();
 
     return (
-        <div className="px-4 py-4 border-b border-gray-200 dark:border-gray-700">
+        <div className="px-4 py-4 border-b border-gray-200 dark:border-gray-700 sm:rounded-tl-lg">
             <input
                 type="text"
                 id={`task_name_${taskId}`}
diff --git a/frontend/components/Task/TaskModal.tsx b/frontend/components/Task/TaskModal.tsx
index d3a8899..4b1fd28 100644
--- a/frontend/components/Task/TaskModal.tsx
+++ b/frontend/components/Task/TaskModal.tsx
@@ -501,7 +501,7 @@ const TaskModal: React.FC<TaskModalProps> = ({
                         <div className="flex flex-col lg:flex-row h-full sm:min-h-[600px] sm:max-h-[90vh]">
                             {/* Main Form Section */}
                             <div
-                                className={`flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 ${
+                                className={`flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-l-lg ${
                                     isTimelineExpanded ? 'lg:pr-2' : ''
                                 }`}
                             >
@@ -921,7 +921,7 @@ const TaskModal: React.FC<TaskModalProps> = ({
                                 </div>
 
                                 {/* Action Buttons - Below border with custom layout */}
-                                <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
+                                <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-bl-lg">
                                     {/* Left side: Delete and Cancel */}
                                     <div className="flex items-center space-x-3">
                                         {task.id && (
diff --git a/frontend/components/Task/TimelinePanel.tsx b/frontend/components/Task/TimelinePanel.tsx
index 82b9f11..b694e83 100644
--- a/frontend/components/Task/TimelinePanel.tsx
+++ b/frontend/components/Task/TimelinePanel.tsx
@@ -22,7 +22,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
                 isExpanded
                     ? 'w-full lg:w-80 opacity-100'
                     : 'w-0 lg:w-12 opacity-0 lg:opacity-100'
-            } border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 flex flex-col transition-all duration-300 overflow-hidden`}
+            } border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 sm:rounded-r-lg flex flex-col transition-all duration-300 overflow-hidden`}
         >
             {/* Collapsed state - envelope icon */}
             {!isExpanded && (