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

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}`}
           />

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"}

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

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"}