From b4bb5407c9bbe8ea699502c4f76c1f5a2f27f527 Mon Sep 17 00:00:00 2001
From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com>
Date: Tue, 19 May 2026 17:12:37 +0000
Subject: [PATCH] Improve usability and appearance of notes and meetings
 sections

Adjust styling for mobile responsiveness in the notes header, improve contrast for completed checklist items, and refine the layout of the executive meetings form dialog.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: ce2e0a68-adc1-43df-936b-f4a7772ac303
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/IO8TMSC
Replit-Helium-Checkpoint-Created: true
---
 .../tx-os/src/components/notes/composer.tsx   |  2 +-
 .../components/notes/incoming-note-popup.tsx  |  2 +-
 .../tx-os/src/pages/executive-meetings.tsx    | 16 ++++-----
 artifacts/tx-os/src/pages/notes.tsx           | 34 ++++++++++---------
 4 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/artifacts/tx-os/src/components/notes/composer.tsx b/artifacts/tx-os/src/components/notes/composer.tsx
index 96c77827..6a87718d 100644
--- a/artifacts/tx-os/src/components/notes/composer.tsx
+++ b/artifacts/tx-os/src/components/notes/composer.tsx
@@ -108,7 +108,7 @@ export function ChecklistEditor({
             }}
             placeholder={t("notes.checklist.itemPlaceholder", "List item")}
             className={`h-8 border-0 bg-transparent shadow-none focus-visible:ring-0 px-1 ${
-              it.done ? "line-through text-muted-foreground" : ""
+              it.done ? "line-through decoration-foreground/60 text-foreground/55" : "text-foreground"
             }`}
             data-testid={`${testIdPrefix}-text-${it.id}`}
           />
diff --git a/artifacts/tx-os/src/components/notes/incoming-note-popup.tsx b/artifacts/tx-os/src/components/notes/incoming-note-popup.tsx
index 6519bee9..5e588958 100644
--- a/artifacts/tx-os/src/components/notes/incoming-note-popup.tsx
+++ b/artifacts/tx-os/src/components/notes/incoming-note-popup.tsx
@@ -222,7 +222,7 @@ function PopupChecklistPreview({
             />
             <span
               className={`flex-1 break-words ${
-                checked ? "line-through text-muted-foreground" : ""
+                checked ? "line-through decoration-foreground/60 text-foreground/55" : "text-foreground"
               }`}
             >
               {it.text || "\u00A0"}
diff --git a/artifacts/tx-os/src/pages/executive-meetings.tsx b/artifacts/tx-os/src/pages/executive-meetings.tsx
index 37a25963..fdc65b6a 100644
--- a/artifacts/tx-os/src/pages/executive-meetings.tsx
+++ b/artifacts/tx-os/src/pages/executive-meetings.tsx
@@ -7522,20 +7522,20 @@ function MeetingFormDialog({
           on mobile. Without this the whole sheet scrolled and the
           Save/Cancel buttons slid below the visible 90vh viewport on
           phones. Reduced mobile padding/gaps; desktop unchanged. */}
-      <DialogContent className="max-w-3xl max-h-[90vh] p-4 sm:p-6 flex flex-col gap-3 sm:gap-4 overflow-hidden">
+      <DialogContent className="w-[calc(100vw-1rem)] sm:w-full max-w-3xl max-h-[92vh] p-3 sm:p-6 flex flex-col gap-2 sm:gap-4 overflow-hidden rounded-2xl">
         <DialogHeader className="shrink-0">
-          <DialogTitle>
+          <DialogTitle className="text-base sm:text-lg pe-8">
             {state.id == null
               ? t("executiveMeetings.manage.addMeeting")
               : t("executiveMeetings.manage.editMeeting")}
           </DialogTitle>
         </DialogHeader>
-        <div className="flex-1 min-h-0 overflow-y-auto -mx-4 px-4 sm:-mx-6 sm:px-6 space-y-3 sm:space-y-4">
-        {/* #322 polish (grid): title spans full width. Date + daily
-            number always share one row (both are short). Time pickers
-            are full-width on mobile so the AM/PM controls don't get
-            cramped, but share a row on tablet/desktop. */}
-        <div className="grid grid-cols-2 gap-2 sm:gap-3">
+        <div className="flex-1 min-h-0 overflow-y-auto -mx-3 px-3 sm:-mx-6 sm:px-6 space-y-3 sm:space-y-4">
+        {/* #322 polish (grid): title spans full width. On phones every
+            field stacks (single column) so labels/inputs don't get
+            crammed and hints stay tied to their own input. From sm+
+            date+daily-number share a row and time pickers share a row. */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
           <FormRow
             label={t("executiveMeetings.manage.field.titleAr")}
             full
diff --git a/artifacts/tx-os/src/pages/notes.tsx b/artifacts/tx-os/src/pages/notes.tsx
index 0ae30f95..73034742 100644
--- a/artifacts/tx-os/src/pages/notes.tsx
+++ b/artifacts/tx-os/src/pages/notes.tsx
@@ -587,27 +587,29 @@ export default function NotesPage() {
           icons / search / tabs so the bar is easier to read on big
           screens. Sizing kept responsive (flex-wrap) so it still folds
           nicely on narrow widths. */}
-      <div className="glass-panel border-b border-slate-200/70 px-6 py-5 shrink-0 sticky top-0 z-10">
-        <div className="flex items-center gap-4 flex-wrap">
+      <div className="glass-panel border-b border-slate-200/70 px-3 py-3 sm:px-6 sm:py-5 shrink-0 sticky top-0 z-10">
+        <div className="flex items-center gap-2 sm:gap-4 flex-wrap">
           <button
             onClick={() => setLocation("/")}
-            className="p-2.5 rounded-xl hover:bg-slate-100/60 text-muted-foreground hover:text-foreground transition-colors"
+            className="p-2 sm:p-2.5 rounded-xl hover:bg-slate-100/60 text-muted-foreground hover:text-foreground transition-colors"
             aria-label={t("common.back", "Back")}
           >
-            <BackIcon size={24} />
+            <BackIcon size={20} className="sm:hidden" />
+            <BackIcon size={24} className="hidden sm:block" />
           </button>
-          <div className="flex items-center gap-3">
-            <StickyNote size={28} className="text-amber-500" />
-            <h1 className="text-2xl font-semibold text-foreground">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <StickyNote size={22} className="text-amber-500 sm:hidden" />
+            <StickyNote size={28} className="text-amber-500 hidden sm:block" />
+            <h1 className="text-lg sm:text-2xl font-semibold text-foreground">
               {t("notes.title", "Notes")}
             </h1>
           </div>
 
-          <div className="flex-1 min-w-[220px] max-w-xl ms-auto relative">
+          <div className="flex-1 min-w-[160px] sm:min-w-[220px] max-w-xl ms-auto relative">
             <Search
-              size={20}
+              size={18}
               className="absolute top-1/2 -translate-y-1/2 text-muted-foreground"
-              style={isRtl ? { right: 14 } : { left: 14 }}
+              style={isRtl ? { right: 12 } : { left: 12 }}
             />
             {/* The icon sits on the start side in both directions
                 (right in RTL, left in LTR), so the input's reserved
@@ -619,7 +621,7 @@ export default function NotesPage() {
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               placeholder={t("notes.searchPlaceholder", "Search notes")}
-              className="ps-11 h-12 text-base"
+              className="ps-10 sm:ps-11 h-10 sm:h-12 text-sm sm:text-base"
             />
           </div>
 
@@ -627,14 +629,14 @@ export default function NotesPage() {
             variant="ghost"
             onClick={() => setLabelsDialogOpen(true)}
             data-testid="notes-manage-labels-open"
-            className="h-12 px-4 text-base"
+            className="h-10 sm:h-12 px-2 sm:px-4 text-sm sm:text-base"
           >
-            <Tag size={20} className="me-2" />
-            {t("notes.labels", "Labels")}
+            <Tag size={18} className="sm:me-2" />
+            <span className="hidden sm:inline">{t("notes.labels", "Labels")}</span>
           </Button>
         </div>
 
-        <div className="mt-4 flex items-center gap-3 flex-wrap">
+        <div className="mt-2 sm:mt-4 flex items-center gap-2 sm:gap-3 flex-wrap">
           {/* replaced the four-tab email-style bar with a unified
               feed. The page opens directly on "My Notes"; Inbox / Sent /
               Archived now live in the overflow menu (⋯) on the end of the
@@ -3057,7 +3059,7 @@ function ChecklistView({
           />
           <span
             className={`flex-1 break-words ${
-              it.done ? "line-through text-muted-foreground" : ""
+              it.done ? "line-through decoration-foreground/60 text-foreground/55" : "text-foreground"
             }`}
           >
             {it.text || "\u00A0"}