From e0bc0511368a75eec43cd90bd222c6b2b8bbefd7 Mon Sep 17 00:00:00 2001
From: bahmez <youbahri31@gmail.com>
Date: Sun, 8 Feb 2026 11:50:27 +0100
Subject: [PATCH 1/2] feat: integrate @tailwindcss/typography and enhance
 styling

- Added @tailwindcss/typography as a dependency to improve text styling across the application.
- Updated tailwind.config.ts to include typography plugin.
- Enhanced global styles in globals.css for better layout and responsiveness.
- Refined component styles in various files to ensure consistent design and improved user experience.
- Implemented mobile menu functionality in the HomePage component for better navigation on smaller screens.
---
 apps/web/package.json                         |   1 +
 .../boards/[boardId]/board-client.tsx         |  22 +--
 .../app/(app)/dashboard/dashboard-client.tsx  |  25 +--
 .../dashboard/members/members-client.tsx      |  21 +--
 apps/web/src/app/globals.css                  |  65 ++++++++
 apps/web/src/app/page.tsx                     |  99 +++++++++---
 apps/web/src/components/layout/navbar.tsx     |  33 ++--
 .../src/components/layout/trello-layout.tsx   |  41 ++++-
 .../components/ticket/ticket-dialog-v2.tsx    | 143 ++++++++++++------
 apps/web/tailwind.config.ts                   |   2 +
 pnpm-lock.yaml                                |  22 +++
 11 files changed, 356 insertions(+), 118 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 1921126..e7dbfec 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -39,6 +39,7 @@
     "superjson": "^2.2.2"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.19",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
diff --git a/apps/web/src/app/(app)/dashboard/boards/[boardId]/board-client.tsx b/apps/web/src/app/(app)/dashboard/boards/[boardId]/board-client.tsx
index 3bbbc04..71dc4c5 100644
--- a/apps/web/src/app/(app)/dashboard/boards/[boardId]/board-client.tsx
+++ b/apps/web/src/app/(app)/dashboard/boards/[boardId]/board-client.tsx
@@ -934,9 +934,9 @@ export default function BoardClient({ boardId }: { boardId: string }) {
 
   return (
     <div className="h-full flex flex-col" style={getBoardBackgroundStyle(board.background, { fallback: '#0b0f13' })}>
-      <div className="px-6 pt-5 pb-3 text-[#b6c2cf] flex items-center justify-between border-b border-[#9fadbc29] bg-[#0b0f13]/70 backdrop-blur-sm">
-        <div>
-          <div className="text-xl font-semibold">
+      <div className="px-3 sm:px-6 pt-3 sm:pt-5 pb-2 sm:pb-3 text-[#b6c2cf] flex flex-wrap items-center justify-between gap-2 border-b border-[#9fadbc29] bg-[#0b0f13]/70 backdrop-blur-sm">
+        <div className="min-w-0 flex-1">
+          <div className="text-lg sm:text-xl font-semibold truncate">
             {isEditingBoardTitle ? (
               <Input
                 autoFocus
@@ -965,7 +965,7 @@ export default function BoardClient({ boardId }: { boardId: string }) {
             ) : (
               <button
                 type="button"
-                className="hover:bg-[#a6c5e229] rounded px-2 py-1 -ml-2 transition-colors"
+                className="hover:bg-[#a6c5e229] rounded px-2 py-1 -ml-2 transition-colors truncate max-w-full text-left"
                 onClick={() => {
                   setBoardTitleDraft(board.title);
                   setIsEditingBoardTitle(true);
@@ -975,15 +975,15 @@ export default function BoardClient({ boardId }: { boardId: string }) {
               </button>
             )}
           </div>
-          {board.description ? <div className="text-sm text-[#9fadbc] mt-1">{board.description}</div> : null}
+          {board.description ? <div className="text-sm text-[#9fadbc] mt-1 truncate">{board.description}</div> : null}
         </div>
 
-        <div className="flex gap-2">
+        <div className="flex flex-wrap gap-2 shrink-0">
           <Dialog open={backgroundPickerOpen} onOpenChange={setBackgroundPickerOpen}>
             <DialogTrigger asChild>
-              <Button variant="ghost" className="gap-2" disabled={!canEditBackground}>
+              <Button variant="ghost" className="gap-2" disabled={!canEditBackground} size="sm">
                 <Paintbrush className="h-4 w-4" />
-                {t('board.background')}
+                <span className="hidden sm:inline">{t('board.background')}</span>
               </Button>
             </DialogTrigger>
             <DialogContent className="bg-[#1d2125] border-[#9fadbc29] text-[#b6c2cf] max-w-2xl">
@@ -1073,9 +1073,9 @@ export default function BoardClient({ boardId }: { boardId: string }) {
           </Dialog>
 
           <Dialog open={boardActivityOpen} onOpenChange={setBoardActivityOpen}>
-            <Button variant="ghost" className="gap-2" onClick={() => setBoardActivityOpen(true)}>
+            <Button variant="ghost" className="gap-2" onClick={() => setBoardActivityOpen(true)} size="sm">
               <ScrollText className="h-4 w-4" />
-              {t('board.board_activity')}
+              <span className="hidden sm:inline">{t('board.board_activity')}</span>
             </Button>
             <DialogContent className="bg-[#1d2125] border-[#9fadbc29] text-[#b6c2cf] max-w-2xl">
               <DialogHeader>
@@ -1130,7 +1130,7 @@ export default function BoardClient({ boardId }: { boardId: string }) {
 
           <Dialog>
             <DialogTrigger asChild>
-              <Button variant="trello">{t('board.add_column')}</Button>
+              <Button variant="trello" size="sm">{t('board.add_column')}</Button>
             </DialogTrigger>
             <DialogContent className="bg-[#1d2125] border-[#9fadbc29] text-[#b6c2cf]">
               <DialogHeader>
diff --git a/apps/web/src/app/(app)/dashboard/dashboard-client.tsx b/apps/web/src/app/(app)/dashboard/dashboard-client.tsx
index 92f06be..28a303a 100644
--- a/apps/web/src/app/(app)/dashboard/dashboard-client.tsx
+++ b/apps/web/src/app/(app)/dashboard/dashboard-client.tsx
@@ -190,20 +190,20 @@ export default function DashboardClient() {
   const pageWorkspaces = workspaces.slice(wsStart, wsStart + WORKSPACES_PER_PAGE);
 
   return (
-    <div className="p-6 text-[#b6c2cf]">
-      <div className="flex items-start justify-between gap-4">
-        <div>
-          <h1 className="text-2xl font-semibold">Dashboard</h1>
-          <p className="mt-2 text-[#9fadbc]">
+    <div className="p-4 sm:p-6 text-[#b6c2cf] overflow-x-hidden">
+      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
+        <div className="min-w-0">
+          <h1 className="text-xl sm:text-2xl font-semibold">Dashboard</h1>
+          <p className="mt-1 sm:mt-2 text-[#9fadbc] text-sm">
             {archivedView ? t('dashboard.archived_workspaces') : t('dashboard.all_workspaces')}
           </p>
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2 shrink-0">
           {!archivedView && (
             <Dialog>
             <DialogTrigger asChild>
-              <Button variant="trelloGray">{t('dashboard.create_board')}</Button>
+              <Button variant="trelloGray" size="sm">{t('dashboard.create_board')}</Button>
             </DialogTrigger>
             <DialogContent>
               <DialogHeader>
@@ -236,22 +236,23 @@ export default function DashboardClient() {
         {pageWorkspaces.map((ws) => {
           const page = boardsPagesByWorkspace[ws.id] ?? 1;
           return (
-            <section key={ws.id} className="rounded-xl border border-[#9fadbc29] bg-[#1d2125] p-5">
-              <div className="flex items-start justify-between gap-4">
-                <div className="min-w-0">
-                  <div className="text-lg font-semibold text-[#b6c2cf] truncate">{ws.title}</div>
+            <section key={ws.id} className="rounded-xl border border-[#9fadbc29] bg-[#1d2125] p-4 sm:p-5">
+              <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4">
+                <div className="min-w-0 flex-1">
+                  <div className="text-base sm:text-lg font-semibold text-[#b6c2cf] truncate">{ws.title}</div>
                   {ws.description ? <div className="text-sm text-[#9fadbc] mt-1 line-clamp-2">{ws.description}</div> : null}
                 </div>
                 {archivedView ? (
                   <Button
                     variant="trelloGray"
+                    size="sm"
                     disabled={unarchive.isPending}
                     onClick={() => unarchive.mutate({ workspaceId: ws.id })}
                   >
                     {t('dashboard.remove_from_archives')}
                   </Button>
                 ) : (
-                  <Button asChild variant="trelloGray">
+                  <Button asChild variant="trelloGray" size="sm">
                     <Link href={`/dashboard/workspaces/${ws.id}`}>{t('navbar.see_more')}</Link>
                   </Button>
                 )}
diff --git a/apps/web/src/app/(app)/dashboard/members/members-client.tsx b/apps/web/src/app/(app)/dashboard/members/members-client.tsx
index c96a809..14a2d6c 100644
--- a/apps/web/src/app/(app)/dashboard/members/members-client.tsx
+++ b/apps/web/src/app/(app)/dashboard/members/members-client.tsx
@@ -60,15 +60,15 @@ function MemberRow({
   const cannotRemove = isLastMember || isLastAdmin;
 
   return (
-    <div className="flex items-center justify-between gap-3 rounded-md border border-[#9fadbc29] p-3">
+    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-3 rounded-md border border-[#9fadbc29] p-3">
       <div className="min-w-0">
         <div className="text-sm font-medium truncate">{label}</div>
         {secondary ? <div className="text-xs text-[#9fadbc] truncate">{secondary}</div> : null}
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 shrink-0">
         <Select value={member.role} onValueChange={(v) => onUpdateRole(member.userId, v as Role)}>
-          <SelectTrigger className="h-9 w-[140px] bg-[#22272b] border-[#9fadbc29] text-[#b6c2cf]">
+          <SelectTrigger className="h-9 w-[120px] sm:w-[140px] bg-[#22272b] border-[#9fadbc29] text-[#b6c2cf]">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -82,6 +82,7 @@ function MemberRow({
 
         <Button
           variant="ghost"
+          size="sm"
           className="h-9 text-[#9fadbc] hover:bg-[#a6c5e229]"
           disabled={cannotRemove}
           onClick={() => {
@@ -203,19 +204,19 @@ export default function MembersClient() {
   }
 
   return (
-    <div className="p-6 text-[#b6c2cf]">
-      <div className="flex items-start justify-between gap-4">
+    <div className="p-4 sm:p-6 text-[#b6c2cf] overflow-x-hidden">
+      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
         <div className="min-w-0">
-          <h1 className="text-2xl font-semibold truncate">{t('members.page_title')}</h1>
-          <p className="mt-2 text-[#9fadbc]">
+          <h1 className="text-xl sm:text-2xl font-semibold truncate">{t('members.page_title')}</h1>
+          <p className="mt-1 sm:mt-2 text-[#9fadbc] text-sm">
             Workspace: <span className="text-[#b6c2cf]">{wsQuery.data?.title ?? workspaceId}</span>
           </p>
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2 shrink-0">
           <Dialog open={addOpen} onOpenChange={setAddOpen}>
             <DialogTrigger asChild>
-              <Button variant="trelloGray">{t('members.add_member_btn')}</Button>
+              <Button variant="trelloGray" size="sm">{t('members.add_member_btn')}</Button>
             </DialogTrigger>
             <DialogContent>
               <DialogHeader>
@@ -283,7 +284,7 @@ export default function MembersClient() {
 
           <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
             <DialogTrigger asChild>
-              <Button variant="trello">{t('members.create_invite_btn')}</Button>
+              <Button variant="trello" size="sm">{t('members.create_invite_btn')}</Button>
             </DialogTrigger>
             <DialogContent>
               <DialogHeader>
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 8fe1d10..05ea9b6 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -55,8 +55,11 @@
     @apply border-border;
   }
 
+  html,
   body {
     @apply bg-background text-foreground;
+    overflow-x: hidden;
+    max-width: 100vw;
   }
 }
 
@@ -86,3 +89,65 @@
 .w-md-editor-text {
   color: #b6c2cf !important;
 }
+
+/* Dark prose overrides for ticket modals (complement @tailwindcss/typography) */
+.prose-invert {
+  --tw-prose-body: #b6c2cf;
+  --tw-prose-headings: #d2dce6;
+  --tw-prose-lead: #9fadbc;
+  --tw-prose-links: #579dff;
+  --tw-prose-bold: #d2dce6;
+  --tw-prose-counters: #9fadbc;
+  --tw-prose-bullets: #9fadbc;
+  --tw-prose-hr: #9fadbc29;
+  --tw-prose-quotes: #9fadbc;
+  --tw-prose-quote-borders: #579dff;
+  --tw-prose-captions: #9fadbc;
+  --tw-prose-code: #f78166;
+  --tw-prose-pre-code: #b6c2cf;
+  --tw-prose-pre-bg: #1d2125;
+  --tw-prose-th-borders: #9fadbc29;
+  --tw-prose-td-borders: #9fadbc29;
+}
+
+.prose-invert code:not(pre code) {
+  background-color: #1d2125;
+  border: 1px solid rgba(159, 173, 188, 0.16);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.8em;
+}
+
+.prose-invert pre {
+  background-color: #1d2125 !important;
+  border: 1px solid rgba(159, 173, 188, 0.16);
+  border-radius: 0.5rem;
+}
+
+.prose-invert blockquote {
+  border-left-color: #579dff;
+}
+
+.prose-invert table {
+  border-collapse: collapse;
+}
+
+.prose-invert th,
+.prose-invert td {
+  border: 1px solid rgba(159, 173, 188, 0.16);
+  padding: 0.5rem 0.75rem;
+}
+
+.prose-invert thead {
+  background-color: #1d2125;
+}
+
+.prose-invert img {
+  border-radius: 0.5rem;
+  border: 1px solid rgba(159, 173, 188, 0.16);
+}
+
+.prose-invert input[type="checkbox"] {
+  accent-color: #579dff;
+  margin-right: 0.5rem;
+}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 0e3aeb5..6b0309d 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -14,15 +14,33 @@
 
 'use client';
 
+import { useState } from 'react';
 import Link from 'next/link';
 import { Button } from '@taskly/ui';
 import { useAuth } from '@/auth/auth-provider';
 import { useTranslation } from '@/lib/i18n';
 import { LanguageSwitcher } from '@/components/language-switcher';
 
+function BurgerIcon({ open }: { open: boolean }) {
+  return (
+    <div className="flex flex-col justify-center items-center w-6 h-6 gap-[5px]">
+      <span
+        className={`block h-[2px] w-5 rounded-full bg-slate-700 transition-all duration-300 ${open ? 'translate-y-[7px] rotate-45' : ''}`}
+      />
+      <span
+        className={`block h-[2px] w-5 rounded-full bg-slate-700 transition-all duration-300 ${open ? 'opacity-0' : ''}`}
+      />
+      <span
+        className={`block h-[2px] w-5 rounded-full bg-slate-700 transition-all duration-300 ${open ? '-translate-y-[7px] -rotate-45' : ''}`}
+      />
+    </div>
+  );
+}
+
 export default function HomePage() {
   const { user, loading, logout } = useAuth();
   const { t } = useTranslation();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const showAuthButtons = !loading && !user;
   const showDashboardButtons = !loading && user;
 
@@ -34,38 +52,79 @@ export default function HomePage() {
   return (
     <main className="min-h-screen bg-gradient-to-b from-white via-white to-slate-50">
       <div className="mx-auto flex max-w-6xl flex-col gap-20 px-6 py-10">
-        <header className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#0c66e4] text-white font-semibold">
-              T
+        <header className="relative">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#0c66e4] text-white font-semibold">
+                T
+              </div>
+              <span className="text-lg font-semibold text-slate-900">Taskly</span>
             </div>
-            <span className="text-lg font-semibold text-slate-900">Taskly</span>
+
+            {/* Desktop nav */}
+            <div className="hidden sm:flex items-center gap-3">
+              <LanguageSwitcher />
+              <div className="flex items-center gap-2">
+                {showAuthButtons && (
+                  <>
+                    <Button asChild variant="trelloGray" size="sm">
+                      <Link href="/login">{t('header.login_button')}</Link>
+                    </Button>
+                    <Button asChild variant="trello" size="sm">
+                      <Link href="/register">{t('header.register_button')}</Link>
+                    </Button>
+                  </>
+                )}
+                {showDashboardButtons && (
+                  <>
+                    <Button asChild variant="trello" size="sm">
+                      <Link href="/dashboard">{t('header.dashboard_button')}</Link>
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={() => logout()}>
+                      {t('header.logout_button')}
+                    </Button>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* Burger button (mobile only) */}
+            <button
+              type="button"
+              className="sm:hidden flex items-center justify-center h-10 w-10 rounded-lg hover:bg-slate-100 transition-colors"
+              onClick={() => setMobileMenuOpen((v) => !v)}
+              aria-label="Toggle menu"
+            >
+              <BurgerIcon open={mobileMenuOpen} />
+            </button>
           </div>
-          <div className="flex items-center gap-4">
-            <LanguageSwitcher />
-            <div className="flex items-center gap-2">
+
+          {/* Mobile menu */}
+          {mobileMenuOpen && (
+            <div className="sm:hidden mt-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-lg space-y-4 animate-in fade-in slide-in-from-top-2 duration-200">
+              <LanguageSwitcher />
               {showAuthButtons && (
-                <>
-                  <Button asChild variant="trelloGray">
-                    <Link href="/login">{t('header.login_button')}</Link>
+                <div className="flex flex-col gap-2">
+                  <Button asChild variant="trelloGray" className="w-full justify-center">
+                    <Link href="/login" onClick={() => setMobileMenuOpen(false)}>{t('header.login_button')}</Link>
                   </Button>
-                  <Button asChild variant="trello">
-                    <Link href="/register">{t('header.register_button')}</Link>
+                  <Button asChild variant="trello" className="w-full justify-center">
+                    <Link href="/register" onClick={() => setMobileMenuOpen(false)}>{t('header.register_button')}</Link>
                   </Button>
-                </>
+                </div>
               )}
               {showDashboardButtons && (
-                <>
-                  <Button asChild variant="trello">
-                    <Link href="/dashboard">{t('header.dashboard_button')}</Link>
+                <div className="flex flex-col gap-2">
+                  <Button asChild variant="trello" className="w-full justify-center">
+                    <Link href="/dashboard" onClick={() => setMobileMenuOpen(false)}>{t('header.dashboard_button')}</Link>
                   </Button>
-                  <Button variant="outline" onClick={() => logout()}>
+                  <Button variant="outline" className="w-full justify-center" onClick={() => { logout(); setMobileMenuOpen(false); }}>
                     {t('header.logout_button')}
                   </Button>
-                </>
+                </div>
               )}
             </div>
-          </div>
+          )}
         </header>
 
         <section className="grid items-center gap-12 lg:grid-cols-[1.1fr_0.9fr]">
diff --git a/apps/web/src/components/layout/navbar.tsx b/apps/web/src/components/layout/navbar.tsx
index 2730d2c..f150ca0 100644
--- a/apps/web/src/components/layout/navbar.tsx
+++ b/apps/web/src/components/layout/navbar.tsx
@@ -285,21 +285,21 @@ export function Navbar() {
   )
 
   return (
-    <Header className="h-12 bg-[#1d2125] border-b border-[#9fadbc29] px-4 flex items-center justify-between backdrop-blur-none supports-[backdrop-filter]:bg-[#1d2125]">
+    <Header className="h-12 bg-[#1d2125] border-b border-[#9fadbc29] px-2 sm:px-4 flex items-center justify-between backdrop-blur-none supports-[backdrop-filter]:bg-[#1d2125] overflow-hidden">
       {/* Left Section */}
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-1 min-w-0 shrink-0">
         <Button
           variant="ghost"
           size="icon"
-          className="h-8 w-8 text-[#9fadbc] hover:bg-[#a6c5e229] hover:text-[#9fadbc]"
+          className="h-8 w-8 text-[#9fadbc] hover:bg-[#a6c5e229] hover:text-[#9fadbc] shrink-0"
         >
           <Grid className="h-4 w-4" />
         </Button>
 
-        <Link href="/dashboard" className="flex items-center gap-2 px-2 group">
+        <Link href="/dashboard" className="flex items-center gap-2 px-2 group shrink-0">
           <div className="flex gap-1 items-center font-bold text-[#9fadbc] group-hover:text-white transition-colors text-lg tracking-tight">
             <div className="h-5 w-5 bg-[#0055cc] rounded-[2px]" />
-            Taskly
+            <span className="hidden sm:inline">Taskly</span>
           </div>
         </Link>
 
@@ -414,21 +414,32 @@ export function Navbar() {
       </div>
 
       {/* Right Section */}
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-1 shrink-0">
+        {/* Search: icon-only on sm, full bar on md+ */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-[#9fadbc] hover:bg-[#a6c5e229] sm:hidden shrink-0"
+          onClick={() => setSearchOpen(true)}
+        >
+          <Search className="h-4 w-4" />
+        </Button>
         <button
           onClick={() => setSearchOpen(true)}
-          className="relative hidden sm:flex items-center h-8 w-56 bg-[#22272b] border border-[#9fadbc29] rounded-md px-3 mr-1 hover:bg-[#2c333a] transition-colors group"
+          className="relative hidden sm:flex items-center h-8 w-44 lg:w-56 bg-[#22272b] border border-[#9fadbc29] rounded-md px-3 mr-1 hover:bg-[#2c333a] transition-colors group shrink-0"
         >
           <Search className="h-4 w-4 text-[#9fadbc] mr-2" />
-          <span className="text-sm text-[#9fadbc] flex-1 text-left">{t('navbar.search_placeholder')}</span>
-          <kbd className="hidden md:inline-flex h-5 px-1.5 items-center gap-1 rounded border border-[#9fadbc29] bg-[#1d2125] text-[10px] font-medium text-[#9fadbc]">
+          <span className="text-sm text-[#9fadbc] flex-1 text-left truncate">{t('navbar.search_placeholder')}</span>
+          <kbd className="hidden lg:inline-flex h-5 px-1.5 items-center gap-1 rounded border border-[#9fadbc29] bg-[#1d2125] text-[10px] font-medium text-[#9fadbc]">
             <span>⌘</span>K
           </kbd>
         </button>
         
         <SearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
 
-        <LanguageSwitcherDark />
+        <div className="hidden md:block">
+          <LanguageSwitcherDark />
+        </div>
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -508,7 +519,7 @@ export function Navbar() {
         <Button
           variant="ghost"
           size="icon"
-          className="h-8 w-8 text-[#9fadbc] hover:bg-[#a6c5e229] hover:text-[#9fadbc] rounded-full"
+          className="hidden sm:flex h-8 w-8 text-[#9fadbc] hover:bg-[#a6c5e229] hover:text-[#9fadbc] rounded-full"
         >
           <HelpCircle className="h-4 w-4" />
         </Button>
diff --git a/apps/web/src/components/layout/trello-layout.tsx b/apps/web/src/components/layout/trello-layout.tsx
index 5f17481..8b7dcfc 100644
--- a/apps/web/src/components/layout/trello-layout.tsx
+++ b/apps/web/src/components/layout/trello-layout.tsx
@@ -3,17 +3,50 @@
 import { Navbar } from "@/components/layout/navbar"
 import { Sidebar } from "@/components/layout/sidebar"
 import { Shell } from "@taskly/ui"
-import { useState } from "react"
+import { useState, useEffect } from "react"
+
+function useIsMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = useState(false)
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`)
+    setIsMobile(mq.matches)
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
+    mq.addEventListener("change", handler)
+    return () => mq.removeEventListener("change", handler)
+  }, [breakpoint])
+  return isMobile
+}
 
 export default function TrelloLayout({ children }: { children: React.ReactNode }) {
+  const isMobile = useIsMobile()
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
 
+  // Auto-collapse sidebar on mobile
+  useEffect(() => {
+    if (isMobile) setSidebarCollapsed(true)
+  }, [isMobile])
+
   return (
     <Shell className="bg-gradient-to-r from-blue-600 to-blue-500 overflow-hidden">
       <Navbar />
-      <div className="flex flex-1 overflow-hidden">
-        <Sidebar isCollapsed={sidebarCollapsed} onCollapse={setSidebarCollapsed} className="shrink-0" />
-        <main className="flex-1 overflow-x-auto overflow-y-hidden relative">
+      <div className="flex flex-1 overflow-hidden relative">
+        {/* Mobile overlay when sidebar is open */}
+        {isMobile && !sidebarCollapsed && (
+          <div
+            className="fixed inset-0 z-40 bg-black/50"
+            onClick={() => setSidebarCollapsed(true)}
+          />
+        )}
+        <Sidebar
+          isCollapsed={sidebarCollapsed}
+          onCollapse={setSidebarCollapsed}
+          className={
+            isMobile && !sidebarCollapsed
+              ? "fixed left-0 top-12 bottom-0 z-50 shrink-0"
+              : "shrink-0"
+          }
+        />
+        <main className="flex-1 min-w-0 overflow-x-auto overflow-y-hidden relative">
           {children}
         </main>
       </div>
diff --git a/apps/web/src/components/ticket/ticket-dialog-v2.tsx b/apps/web/src/components/ticket/ticket-dialog-v2.tsx
index 6a04039..6c22174 100644
--- a/apps/web/src/components/ticket/ticket-dialog-v2.tsx
+++ b/apps/web/src/components/ticket/ticket-dialog-v2.tsx
@@ -245,36 +245,101 @@ export default function TicketDialogV2({ open, onOpenChange, ticketId, boardId }
 
   const markdownComponents = React.useMemo(() => {
     return {
+      // Links & mentions
       a: ({ href, children }: { href?: string; children?: React.ReactNode }) => {
         const h = href ?? '';
         if (h.startsWith('mention:')) {
-          // Children should already be "@username" from linkifyMentionsMarkdown
           return (
-            <span className="inline-flex items-center rounded-full px-2 py-0.5 bg-[#0c66e4] text-white border border-[#0c66e4]/60 cursor-default no-underline" style={{ pointerEvents: 'none' }}>
+            <span className="inline-flex items-center rounded-full px-2 py-0.5 bg-[#0c66e4] text-white border border-[#0c66e4]/60 cursor-default no-underline text-xs font-medium" style={{ pointerEvents: 'none' }}>
               {children}
             </span>
           );
         }
-        // Back-compat: old stored mentions as markdown links (user:<id>)
         if (h.startsWith('user:')) {
           const userId = h.slice('user:'.length);
           const u = usersById.get(userId);
           const username = u?.username ?? userId;
-          // If children is already "@username" format, use it; otherwise prepend @
           const childText = typeof children === 'string' ? children : String(children ?? '');
           const label = childText.startsWith('@') ? childText : `@${username}`;
           return (
-            <span className="inline-flex items-center rounded-full px-2 py-0.5 bg-[#0c66e4] text-white border border-[#0c66e4]/60 cursor-default no-underline" style={{ pointerEvents: 'none' }}>
+            <span className="inline-flex items-center rounded-full px-2 py-0.5 bg-[#0c66e4] text-white border border-[#0c66e4]/60 cursor-default no-underline text-xs font-medium" style={{ pointerEvents: 'none' }}>
               {label}
             </span>
           );
         }
         return (
-          <a href={h} className="underline hover:text-[#b6c2cf]" target="_blank" rel="noreferrer">
+          <a href={h} className="text-[#579dff] underline hover:text-[#85b8ff] break-all" target="_blank" rel="noreferrer">
             {children}
           </a>
         );
       },
+      // Headings
+      h1: ({ children }: { children?: React.ReactNode }) => <h1 className="text-xl font-bold text-[#d2dce6] mt-6 mb-3 first:mt-0 border-b border-[#9fadbc29] pb-2">{children}</h1>,
+      h2: ({ children }: { children?: React.ReactNode }) => <h2 className="text-lg font-bold text-[#d2dce6] mt-5 mb-2 first:mt-0 border-b border-[#9fadbc29] pb-1.5">{children}</h2>,
+      h3: ({ children }: { children?: React.ReactNode }) => <h3 className="text-base font-semibold text-[#d2dce6] mt-4 mb-2 first:mt-0">{children}</h3>,
+      h4: ({ children }: { children?: React.ReactNode }) => <h4 className="text-sm font-semibold text-[#d2dce6] mt-3 mb-1 first:mt-0">{children}</h4>,
+      // Paragraphs
+      p: ({ children }: { children?: React.ReactNode }) => <p className="text-sm text-[#b6c2cf] leading-relaxed mb-3 last:mb-0">{children}</p>,
+      // Lists
+      ul: ({ children }: { children?: React.ReactNode }) => <ul className="list-disc list-inside text-sm text-[#b6c2cf] space-y-1 mb-3 pl-2">{children}</ul>,
+      ol: ({ children }: { children?: React.ReactNode }) => <ol className="list-decimal list-inside text-sm text-[#b6c2cf] space-y-1 mb-3 pl-2">{children}</ol>,
+      li: ({ children }: { children?: React.ReactNode }) => <li className="text-sm text-[#b6c2cf] leading-relaxed">{children}</li>,
+      // Code
+      code: ({ children, className }: { children?: React.ReactNode; className?: string }) => {
+        const isBlock = className?.startsWith('language-');
+        if (isBlock) {
+          return (
+            <code className={cn('block text-xs', className)}>
+              {children}
+            </code>
+          );
+        }
+        return (
+          <code className="bg-[#1d2125] text-[#f78166] px-1.5 py-0.5 rounded text-xs font-mono border border-[#9fadbc29]">
+            {children}
+          </code>
+        );
+      },
+      pre: ({ children }: { children?: React.ReactNode }) => (
+        <pre className="bg-[#1d2125] border border-[#9fadbc29] rounded-lg p-4 overflow-x-auto mb-3 text-xs font-mono text-[#b6c2cf] leading-relaxed">
+          {children}
+        </pre>
+      ),
+      // Blockquote
+      blockquote: ({ children }: { children?: React.ReactNode }) => (
+        <blockquote className="border-l-4 border-[#579dff] pl-4 py-1 my-3 text-[#9fadbc] italic bg-[#1d2125]/50 rounded-r-lg">
+          {children}
+        </blockquote>
+      ),
+      // Tables
+      table: ({ children }: { children?: React.ReactNode }) => (
+        <div className="overflow-x-auto mb-3 rounded-lg border border-[#9fadbc29]">
+          <table className="w-full text-sm text-left">{children}</table>
+        </div>
+      ),
+      thead: ({ children }: { children?: React.ReactNode }) => <thead className="bg-[#1d2125] text-[#9fadbc] text-xs uppercase">{children}</thead>,
+      tbody: ({ children }: { children?: React.ReactNode }) => <tbody className="divide-y divide-[#9fadbc29]">{children}</tbody>,
+      tr: ({ children }: { children?: React.ReactNode }) => <tr className="hover:bg-[#22272b]/50 transition-colors">{children}</tr>,
+      th: ({ children }: { children?: React.ReactNode }) => <th className="px-3 py-2 font-semibold text-[#b6c2cf] border-b border-[#9fadbc29]">{children}</th>,
+      td: ({ children }: { children?: React.ReactNode }) => <td className="px-3 py-2 text-[#b6c2cf]">{children}</td>,
+      // Horizontal rule
+      hr: () => <hr className="border-[#9fadbc29] my-4" />,
+      // Images
+      img: ({ src, alt }: { src?: string; alt?: string }) => (
+        <img src={src} alt={alt ?? ''} className="max-w-full h-auto rounded-lg border border-[#9fadbc29] my-3" loading="lazy" />
+      ),
+      // Strong & emphasis
+      strong: ({ children }: { children?: React.ReactNode }) => <strong className="font-semibold text-[#d2dce6]">{children}</strong>,
+      em: ({ children }: { children?: React.ReactNode }) => <em className="italic text-[#b6c2cf]">{children}</em>,
+      // Strikethrough (GFM)
+      del: ({ children }: { children?: React.ReactNode }) => <del className="line-through text-[#9fadbc]">{children}</del>,
+      // Task list items (GFM checkboxes)
+      input: ({ checked, type }: { checked?: boolean; type?: string }) => {
+        if (type === 'checkbox') {
+          return <input type="checkbox" checked={checked} readOnly className="mr-2 rounded accent-[#579dff]" />;
+        }
+        return <input type={type} />;
+      },
     } as const;
   }, [usersById]);
 
@@ -329,37 +394,13 @@ export default function TicketDialogV2({ open, onOpenChange, ticketId, boardId }
   const [descMentionIndex, setDescMentionIndex] = React.useState(0);
 
   const renderCommentContent = React.useCallback((content: string) => {
-    // Parse @username mentions and render them as blue chips (not clickable)
-    const tokens = parseMentionTokens(content);
-    if (tokens.length === 0) {
-      // No mentions, just render as text (or with basic markdown if needed)
-      return <div className="whitespace-pre-wrap">{content}</div>;
-    }
-
-    const parts: React.ReactNode[] = [];
-    let cursor = 0;
-    for (let i = 0; i < tokens.length; i++) {
-      const t = tokens[i]!;
-      if (t.start > cursor) {
-        parts.push(<span key={`t-${i}`}>{content.slice(cursor, t.start)}</span>);
-      }
-      const mentionText = content.slice(t.start, t.end); // "@username"
-      parts.push(
-        <span
-          key={`m-${i}`}
-          className="inline-flex items-center rounded-full px-2 py-0.5 bg-[#0c66e4] text-white border border-[#0c66e4]/60"
-          style={{ pointerEvents: 'none' }}
-        >
-          {mentionText}
-        </span>,
-      );
-      cursor = t.end;
-    }
-    if (cursor < content.length) {
-      parts.push(<span key="tail">{content.slice(cursor)}</span>);
-    }
-    return <div className="whitespace-pre-wrap">{parts}</div>;
-  }, []);
+    // Render comments as markdown with mention support
+    return (
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+        {linkifyMentionsMarkdown(content)}
+      </ReactMarkdown>
+    );
+  }, [markdownComponents]);
 
   const descMentionCandidates = React.useMemo(() => {
     if (!descMention) return [];
@@ -692,9 +733,9 @@ export default function TicketDialogV2({ open, onOpenChange, ticketId, boardId }
   return (
     <>
       <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-w-4xl w-[90vw] max-h-[90vh] overflow-hidden p-0 bg-[#1d2125] border-[#9fadbc29] text-[#b6c2cf]">
+        <DialogContent className="max-w-4xl w-[95vw] sm:w-[90vw] max-h-[90vh] overflow-hidden p-0 bg-[#1d2125] border-[#9fadbc29] text-[#b6c2cf]">
           {/* Header */}
-          <div className="px-8 pt-8 pb-6 border-b border-[#9fadbc29]">
+          <div className="px-4 sm:px-8 pt-4 sm:pt-8 pb-4 sm:pb-6 border-b border-[#9fadbc29]">
             <div className="flex items-start gap-3">
               <div className="h-10 w-10 shrink-0 flex items-start justify-start pt-2">
                 <FileText className="h-5 w-5 text-[#9fadbc]" />
@@ -736,9 +777,9 @@ export default function TicketDialogV2({ open, onOpenChange, ticketId, boardId }
           </div>
 
           {/* Body: 2 colonnes */}
-          <div className="flex flex-col lg:flex-row gap-8 px-8 py-6 pb-8 overflow-y-auto" style={{ maxHeight: 'calc(90vh - 160px)' }}>
+          <div className="flex flex-col lg:flex-row gap-6 sm:gap-8 px-4 sm:px-8 py-4 sm:py-6 pb-6 sm:pb-8 overflow-y-auto" style={{ maxHeight: 'calc(90vh - 140px)' }}>
             {/* Colonne principale */}
-            <div className="flex-1 space-y-8 min-w-0">
+            <div className="flex-1 space-y-6 sm:space-y-8 min-w-0">
               {/* Labels (si présents) */}
               {ticketLabelIds.length > 0 && (
                 <div>
@@ -1053,16 +1094,17 @@ export default function TicketDialogV2({ open, onOpenChange, ticketId, boardId }
 
               {/* Comments / Activity */}
               <div>
-                <div className="flex items-center gap-3 mb-4">
-                  <MessageSquare className="h-5 w-5 text-[#9fadbc]" />
+                <div className="flex flex-wrap items-center gap-2 sm:gap-3 mb-4">
+                  <MessageSquare className="h-5 w-5 text-[#9fadbc] shrink-0" />
                   <h3 className="text-sm font-semibold text-[#b6c2cf]">
                     {ticketFeedView === 'history' ? t('ticket.activity_tab') : t('ticket.comments_tab')}
                   </h3>
-                  <div className="ml-auto flex items-center gap-2">
+                  <div className="ml-auto flex items-center gap-1 sm:gap-2">
                     <Button
                       size="sm"
                       variant={ticketFeedView === 'comments' ? 'trello' : 'ghost'}
                       onClick={() => setTicketFeedView('comments')}
+                      className="text-xs sm:text-sm px-2 sm:px-3"
                     >
                       {t('ticket.comments_tab')}
                     </Button>
@@ -1070,6 +1112,7 @@ export default function TicketDialogV2({ open, onOpenChange, ticketId, boardId }
                       size="sm"
                       variant={ticketFeedView === 'history' ? 'trello' : 'ghost'}
                       onClick={() => setTicketFeedView('history')}
+                      className="text-xs sm:text-sm px-2 sm:px-3"
                     >
                       {t('ticket.history_tab')}
                     </Button>
@@ -1077,8 +1120,8 @@ export default function TicketDialogV2({ open, onOpenChange, ticketId, boardId }
                 </div>
                 <div className="space-y-4">
                   {ticketFeedView === 'comments' && canComment && (
-                    <div className="flex gap-3">
-                      <UserAvatar user={meQuery.data ?? { username: 'You' }} className="h-9 w-9 shrink-0" />
+                    <div className="flex gap-2 sm:gap-3">
+                      <UserAvatar user={meQuery.data ?? { username: 'You' }} className="h-8 w-8 sm:h-9 sm:w-9 shrink-0" />
                       <div className="flex-1 space-y-3">
                         <Textarea
                           value={newComment}
@@ -1257,7 +1300,7 @@ export default function TicketDialogV2({ open, onOpenChange, ticketId, boardId }
             </div>
 
             {/* Sidebar */}
-            <div className="w-full lg:w-56 shrink-0 space-y-6">
+            <div className="w-full lg:w-56 shrink-0 space-y-4 sm:space-y-6">
               {/* Due date */}
               <div>
                 <div className="text-xs font-semibold text-[#9fadbc] mb-3 uppercase tracking-wide">{t('ticket.due_date')}</div>
@@ -1668,11 +1711,11 @@ export default function TicketDialogV2({ open, onOpenChange, ticketId, boardId }
 
             <div className="space-y-2">
               <div className="text-xs font-semibold text-[#9fadbc] uppercase tracking-wide">{t('ticket.presets')}</div>
-              <div className="flex gap-2">
+              <div className="flex flex-wrap gap-2">
                 <Button
                   size="sm"
                   variant="ghost"
-                  className="flex-1"
+                  className="flex-1 min-w-[120px]"
                   disabled={!ticket.dueDate || createReminder.isPending}
                   onClick={() => {
                     if (!ticket.dueDate) return;
@@ -1687,7 +1730,7 @@ export default function TicketDialogV2({ open, onOpenChange, ticketId, boardId }
                 <Button
                   size="sm"
                   variant="ghost"
-                  className="flex-1"
+                  className="flex-1 min-w-[120px]"
                   disabled={!ticket.dueDate || createReminder.isPending}
                   onClick={() => {
                     if (!ticket.dueDate) return;
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 5e1144a..5f90ab4 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -1,5 +1,6 @@
 import type { Config } from "tailwindcss"
 import uiConfig from "@taskly/ui/tailwind.config"
+import typography from "@tailwindcss/typography"
 
 const config = {
   ...uiConfig,
@@ -7,6 +8,7 @@ const config = {
     "./src/**/*.{ts,tsx}",
     "../../packages/ui/src/**/*.{ts,tsx}",
   ],
+  plugins: [...(uiConfig.plugins ?? []), typography],
 } satisfies Config
 
 export default config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 823bcb9..b0ce20c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -203,6 +203,9 @@ importers:
         specifier: ^2.2.2
         version: 2.2.6
     devDependencies:
+      '@tailwindcss/typography':
+        specifier: ^0.5.19
+        version: 0.5.19(tailwindcss@3.4.19(tsx@4.21.0))
       '@testing-library/jest-dom':
         specifier: ^6.9.1
         version: 6.9.1
@@ -2120,6 +2123,11 @@ packages:
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
+  '@tailwindcss/typography@0.5.19':
+    resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
   '@tanstack/query-core@5.90.12':
     resolution: {integrity: sha512-T1/8t5DhV/SisWjDnaiU2drl6ySvsHj1bHBCWNXd+/T+Hh1cf6JodyEYMd5sgwm+b/mETT4EV3H+zCVczCU5hg==}
 
@@ -4689,6 +4697,10 @@ packages:
     peerDependencies:
       postcss: ^8.2.14
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss-selector-parser@6.1.2:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
@@ -7895,6 +7907,11 @@ snapshots:
       '@swc/counter': 0.1.3
       tslib: 2.8.1
 
+  '@tailwindcss/typography@0.5.19(tailwindcss@3.4.19(tsx@4.21.0))':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.19(tsx@4.21.0)
+
   '@tanstack/query-core@5.90.12': {}
 
   '@tanstack/react-query@5.90.12(react@18.3.1)':
@@ -11284,6 +11301,11 @@ snapshots:
       postcss: 8.5.6
       postcss-selector-parser: 6.1.2
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0

From 7a18d850593c769aad2bb94a27be5783d8388931 Mon Sep 17 00:00:00 2001
From: bahmez <youbahri31@gmail.com>
Date: Sun, 8 Feb 2026 11:55:56 +0100
Subject: [PATCH 2/2] fix: disable img element linting and remove unused import

- Disabled ESLint rule for img elements to prevent warnings in the ticket dialog component.
- Removed unused import of `parseMentionTokens` to clean up the code and improve maintainability.
---
 apps/web/src/components/ticket/ticket-dialog-v2.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ticket/ticket-dialog-v2.tsx b/apps/web/src/components/ticket/ticket-dialog-v2.tsx
index 6c22174..a1b18b2 100644
--- a/apps/web/src/components/ticket/ticket-dialog-v2.tsx
+++ b/apps/web/src/components/ticket/ticket-dialog-v2.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+/* eslint-disable @next/next/no-img-element */
+
 import React from 'react';
 import dynamic from 'next/dynamic';
 import ReactMarkdown from 'react-markdown';
@@ -43,7 +45,6 @@ import {
   findActiveMention,
   insertMention,
   type MentionableUser,
-  parseMentionTokens,
   mentionMatchFromToken,
   findMentionTokenAtCursor,
 } from '../ui/mention-autocomplete';