refactor: improve mobile responsiveness and layout consistency across dashboard views by adding horizontal scrolling and unifying Sidebar components.

app/(dashboard)/calendar/calendar-client.tsx

@@ -133,6 +133,8 @@ export function CalendarClient({ events, clients, projects, tasks }: CalendarCli
               </div>
             </div>
 
+            <div className="overflow-x-auto pb-4">
+              <div className="min-w-[600px]">
                 <div className="grid grid-cols-7 border border-border text-center text-xs font-medium uppercase text-muted-foreground">
                   {["Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz"].map((day) => (
                     <div key={day} className="border-r border-border px-2 py-2 last:border-r-0">
@@ -174,6 +176,8 @@ export function CalendarClient({ events, clients, projects, tasks }: CalendarCli
                 );
               })}
                 </div>
+              </div>
+            </div>
           </CardContent>
         </Card>
 

app/(dashboard)/chat/page.tsx

@@ -242,7 +242,7 @@ export default function AIChatPage() {
                   className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
                 >
                   <div
-                    className={`max-w-[85%] rounded-sm px-4 py-3 text-sm ${
+                    className={`max-w-[92%] md:max-w-[85%] rounded-sm px-4 py-3 text-sm ${
                       message.role === "user"
                         ? "bg-primary text-primary-foreground"
                         : "border border-border bg-muted/40 text-foreground"
@@ -264,7 +264,7 @@ export default function AIChatPage() {
           <div ref={messagesEndRef} />
         </div>
 
-        <form onSubmit={handleSubmit} className="border-t border-border p-4">
+        <form onSubmit={handleSubmit} className="border-t border-border p-4 shrink-0">
           <div className="mx-auto flex max-w-4xl items-end gap-2 rounded-sm border border-border bg-background p-2 focus-within:border-primary">
             <textarea
               value={input}

app/(dashboard)/clients/clients-client.tsx

@@ -250,8 +250,9 @@ export function ClientsClient({
 
         <TabsContent value="list" className="mt-0">
           {filteredClients.length > 0 ? (
-            <div className="overflow-hidden">
+            <div className="overflow-x-auto rounded-sm border border-border">
-              <div className="hidden grid-cols-[1.5fr_1fr_1fr_1fr_0.8fr_0.8fr] gap-4 border-b border-border px-4 py-3 text-xs font-medium uppercase text-muted-foreground lg:grid">
+              <div className="min-w-[900px]">
+                <div className="grid grid-cols-[1.5fr_1fr_1fr_1fr_0.8fr_0.8fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
                   <span>Müşteri</span>
                   <span>İletişim</span>
                   <span>Aşama</span>
@@ -265,6 +266,7 @@ export function ClientsClient({
                   ))}
                 </div>
               </div>
+            </div>
           ) : (
             <EmptyState hasQuery={Boolean(normalizedQuery)} />
           )}
@@ -351,7 +353,7 @@ function ClientRow({ client }: { client: ClientListItem }) {
   const stage = pipelineStages.find(s => s.id === client.pipeline_stage) || pipelineStages[0];
 
   return (
-    <div className="grid gap-4 px-4 py-4 lg:grid-cols-[1.5fr_1fr_1fr_1fr_0.8fr_0.8fr] lg:items-center">
+    <div className="grid gap-4 px-4 py-4 grid-cols-[1.5fr_1fr_1fr_1fr_0.8fr_0.8fr] items-center">
       <div className="min-w-0">
         <div className="flex items-center gap-3">
           <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-sm bg-primary/10 text-sm font-semibold text-primary">
@@ -406,7 +408,7 @@ function ClientRow({ client }: { client: ClientListItem }) {
         <div className="text-muted-foreground">{formatCurrency(client.revenueTotal)}</div>
       </div>
 
-      <div className="flex justify-start gap-2 lg:justify-end">
+      <div className="flex justify-end gap-2">
         <Link href={`/clients/${client.id}`}>
           <Button variant="ghost" className="h-9 w-9 p-0">
             <ArrowRight className="h-4 w-4" />

app/(dashboard)/documents/page.tsx

@@ -206,7 +206,8 @@ export default function DocumentsPage() {
                 ))}
               </div>
             ) : (
-              <div className="bg-[#0A0710] border border-white/5 rounded-sm overflow-hidden shadow-2xl mb-8">
+              <div className="overflow-x-auto bg-[#0A0710] border border-white/5 rounded-sm shadow-2xl mb-8">
+                <div className="min-w-[800px]">
                   <div className="grid grid-cols-12 gap-4 p-5 border-b border-white/5 bg-[#0F0B15]/50 text-[9px] font-black uppercase tracking-[0.3em] text-muted-foreground">
                     <div className="col-span-6 px-2">Document Name</div>
                     <div className="col-span-2">File Weight</div>
@@ -233,6 +234,7 @@ export default function DocumentsPage() {
                     ))}
                   </div>
                 </div>
+              </div>
             )}
           </div>
         </div>

app/(dashboard)/finance/finance-client.tsx

@@ -170,8 +170,9 @@ export function FinanceClient({ transactions, clients, projects }: FinanceClient
             </div>
 
             {filteredTransactions.length > 0 ? (
-              <div className="overflow-hidden rounded-sm border border-border">
+              <div className="overflow-x-auto rounded-sm border border-border">
-                <div className="hidden grid-cols-[1.4fr_0.8fr_0.8fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground lg:grid">
+                <div className="min-w-[800px]">
+                  <div className="grid grid-cols-[1.4fr_0.8fr_0.8fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
                     <span>İşlem</span>
                     <span>Tarih</span>
                     <span>Tutar</span>
@@ -189,6 +190,7 @@ export function FinanceClient({ transactions, clients, projects }: FinanceClient
                   ))}
                   </div>
                 </div>
+              </div>
             ) : (
               <EmptyState hasQuery={Boolean(normalizedQuery)} />
             )}
@@ -240,7 +242,7 @@ function TransactionRow({
   const isIncome = transaction.type === "income";
 
   return (
-    <div className="grid gap-4 px-4 py-4 lg:grid-cols-[1.4fr_0.8fr_0.8fr_0.8fr_1fr] lg:items-center">
+    <div className="grid gap-4 px-4 py-4 grid-cols-[1.4fr_0.8fr_0.8fr_0.8fr_1fr] items-center">
       <div className="flex min-w-0 items-start gap-3">
         <div className={isIncome ? "rounded-sm bg-emerald-50 p-2 text-emerald-700" : "rounded-sm bg-rose-50 p-2 text-rose-700"}>
           {isIncome ? <ArrowUpRight className="h-4 w-4" /> : <ArrowDownRight className="h-4 w-4" />}
@@ -264,7 +266,7 @@ function TransactionRow({
           {paymentStatusLabels[transaction.payment_status]}
         </Badge>
       </div>
-      <div className="flex justify-start gap-2 lg:justify-end">
+      <div className="flex justify-end gap-2">
         <FinanceDialog mode="edit" transaction={transaction} clients={clients} projects={projects} />
         <form action={deleteFinanceTransactionRecord}>
           <input type="hidden" name="id" value={transaction.id} />
@@ -542,6 +544,29 @@ function calculateSummary(transactions: FinanceTransactionItem[]) {
   );
 }
 
+function formatMessageContent(text: string) {
+  if (!text) return null;
+  const lines = text.split("\n");
+  return lines.map((line, i) => (
+    <span key={i}>
+      {line.split(/(\*\*.*?\*\*|\*.*?\*)/g).map((part, j) => {
+        if (part.startsWith("**") && part.endsWith("**")) {
+          return (
+            <strong key={j} className="font-semibold text-foreground">
+              {part.slice(2, -2)}
+            </strong>
+          );
+        }
+        if (part.startsWith("*") && part.endsWith("*")) {
+          return <em key={j}>{part.slice(1, -1)}</em>;
+        }
+        return <span key={j}>{part}</span>;
+      })}
+      {i !== lines.length - 1 && <br />}
+    </span>
+  ));
+}
+
 function AIFinanceDialog() {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -572,7 +597,7 @@ function AIFinanceDialog() {
           AI Analizi
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-y-auto">
+      <DialogContent className="w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[80vh] overflow-y-auto rounded-lg p-6">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Brain className="h-5 w-5 text-indigo-600" />
@@ -602,13 +627,13 @@ function AIFinanceDialog() {
 
           {result && (
             <div className="bg-muted/50 border border-border rounded-lg p-5 text-sm prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap">
-              {result}
+              {formatMessageContent(result)}
             </div>
           )}
         </div>
 
         {result && (
-          <DialogFooter>
+          <DialogFooter className="gap-2 sm:gap-0">
             <Button variant="outline" onClick={() => setOpen(false)}>Kapat</Button>
             <Button variant="default" onClick={handleAnalyze} className="gap-2">
               <Brain className="h-4 w-4" />

app/(dashboard)/journal/journal-client.tsx

@@ -194,8 +194,9 @@ export function JournalClient({ logs }: JournalClientProps) {
           </div>
 
           {logs.length > 0 ? (
-            <div className="overflow-hidden rounded-sm border border-border">
+            <div className="overflow-x-auto rounded-sm border border-border">
-              <div className="hidden grid-cols-[0.7fr_0.7fr_0.7fr_1.8fr_0.8fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground lg:grid">
+              <div className="min-w-[800px]">
+                <div className="grid grid-cols-[0.7fr_0.7fr_0.7fr_1.8fr_0.8fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
                   <span>Tarih</span>
                   <span>Mood</span>
                   <span>Enerji</span>
@@ -208,6 +209,7 @@ export function JournalClient({ logs }: JournalClientProps) {
                 ))}
                 </div>
               </div>
+            </div>
           ) : (
             <EmptyState />
           )}
@@ -219,7 +221,7 @@ export function JournalClient({ logs }: JournalClientProps) {
 
 function DailyLogRow({ log }: { log: DailyLogItem }) {
   return (
-    <div className="grid gap-4 px-4 py-4 lg:grid-cols-[0.7fr_0.7fr_0.7fr_1.8fr_0.8fr] lg:items-center">
+    <div className="grid gap-4 px-4 py-4 grid-cols-[0.7fr_0.7fr_0.7fr_1.8fr_0.8fr] items-center">
       <div>
         <div className="font-medium text-foreground">{formatDate(log.log_date)}</div>
         <div className="text-xs text-muted-foreground">{formatWeekday(log.log_date)}</div>

app/(dashboard)/projects/projects-client.tsx

@@ -187,8 +187,9 @@ export function ProjectsClient({ projects, clients }: ProjectsClientProps) {
                 ))}
               </div>
             ) : (
-              <div className="overflow-hidden rounded-sm border border-border">
+              <div className="overflow-x-auto rounded-sm border border-border">
-                <div className="hidden grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground lg:grid">
+                <div className="min-w-[800px]">
+                  <div className="grid grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
                     <span>Proje</span>
                     <span>Tür</span>
                     <span>Durum</span>
@@ -201,6 +202,7 @@ export function ProjectsClient({ projects, clients }: ProjectsClientProps) {
                     ))}
                   </div>
                 </div>
+              </div>
             )
           ) : (
             <EmptyState hasQuery={Boolean(normalizedQuery)} />
@@ -292,7 +294,7 @@ function ProjectRow({
   clients: ProjectClientOption[];
 }) {
   return (
-    <div className="grid gap-4 px-4 py-4 lg:grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] lg:items-center">
+    <div className="grid gap-4 px-4 py-4 grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] items-center">
       <div className="min-w-0">
         <div className="font-medium text-foreground">{project.name}</div>
         <div className="truncate text-sm text-muted-foreground">
@@ -306,7 +308,7 @@ function ProjectRow({
       <div>
         <ProgressBar progress={project.progress} compact />
       </div>
-      <div className="flex justify-start lg:justify-end">
+      <div className="flex justify-end gap-2">
         <ProjectActions project={project} clients={clients} showDetail />
       </div>
     </div>

app/(dashboard)/settings/page.tsx

@@ -144,14 +144,14 @@ export default function SettingsPage() {
 
       <div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0 pb-12">
         {/* Settings Sidebar */}
-        <div className="w-full md:w-64 flex flex-col gap-1 shrink-0">
+        <div className="w-full md:w-64 flex overflow-x-auto md:flex-col gap-2 shrink-0 pb-2 md:pb-0 tiny-scrollbar">
           {tabs.map((tab) => {
             const Icon = tab.icon;
             return (
               <button
                 key={tab.name}
                 onClick={() => setActiveTab(tab.name)}
-                className={`flex items-center gap-3 px-4 py-3 rounded-md text-sm font-medium transition-colors text-left ${
+                className={`flex shrink-0 items-center gap-3 px-4 py-3 rounded-md text-sm font-medium transition-colors text-left ${
                   activeTab === tab.name 
                     ? "bg-primary/10 text-primary" 
                     : "text-muted-foreground hover:bg-muted hover:text-foreground"

app/(dashboard)/tasks/tasks-client.tsx

@@ -236,8 +236,9 @@ function TaskList({
   projects: TaskRelationOption[];
 }) {
   return (
-    <div className="overflow-hidden rounded-sm border border-border">
+    <div className="overflow-x-auto rounded-sm border border-border">
-      <div className="hidden grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground lg:grid">
+      <div className="min-w-[800px]">
+        <div className="grid grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
           <span>Görev</span>
           <span>Bağlantı</span>
           <span>Öncelik</span>
@@ -250,6 +251,7 @@ function TaskList({
         ))}
         </div>
       </div>
+    </div>
   );
 }
 
@@ -263,7 +265,7 @@ function TaskRow({
   projects: TaskRelationOption[];
 }) {
   return (
-    <div className="grid gap-4 px-4 py-4 lg:grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] lg:items-center">
+    <div className="grid gap-4 px-4 py-4 grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] items-center">
       <div className="min-w-0">
         <div className={task.status === "done" ? "font-medium text-muted-foreground line-through" : "font-medium text-foreground"}>
           {task.title}

app/(dashboard)/time/page.tsx

@@ -137,8 +137,8 @@ export default function TimeTrackingPage() {
               <h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-muted-foreground">Today's Activity Ledger</h3>
               <button className="text-[10px] font-bold text-primary uppercase tracking-widest">Full History</button>
             </div>
-            <div className="flex-1 overflow-y-auto tiny-scrollbar">
+            <div className="flex-1 overflow-y-auto overflow-x-auto tiny-scrollbar">
-              <div className="divide-y divide-white/5">
+              <div className="min-w-[600px] divide-y divide-white/5">
                 {recentLogs.map(log => (
                   <div key={log.id} className="grid grid-cols-12 gap-4 p-5 items-center hover:bg-white/[0.02] transition-all group">
                     <div className="col-span-5 flex items-center gap-4">
@@ -159,6 +159,7 @@ export default function TimeTrackingPage() {
               </div>
             </div>
           </div>
+        </div>
 
         {/* Right: Analytics & AI */}
         <div className="flex flex-col gap-8">

components/layout/dashboard-shell.tsx

@@ -48,9 +48,11 @@ export function DashboardShell({ children, user }: DashboardShellProps) {
   return (
     <div className="min-h-screen bg-background text-foreground">
       <div className="flex min-h-screen">
-        <aside className="sticky top-0 hidden h-dvh shrink-0 self-start border-r border-border bg-background lg:block">
+        <AppSidebar 
-          <AppSidebar pathname={pathname} user={user} />
+          pathname={pathname} 
-        </aside>
+          user={user} 
+          className="sticky top-0 hidden shrink-0 self-start lg:block"
+        />
 
         {/* Mobile Sidebar Overlay */}
         {isMobileSidebarOpen && (
@@ -61,17 +63,14 @@ export function DashboardShell({ children, user }: DashboardShellProps) {
         )}
 
         {/* Mobile Sidebar Drawer */}
-        <aside
-          className={`fixed inset-y-0 left-0 z-50 w-72 transform border-r border-border bg-background transition-transform duration-300 ease-in-out lg:hidden ${
-            isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
-          }`}
-        >
         <AppSidebar
           pathname={pathname}
           user={user}
           onNavigate={() => setIsMobileSidebarOpen(false)}
+          className={`fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out lg:hidden ${
+            isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
+          }`}
         />
-        </aside>
 
         <div className="flex flex-1 flex-col min-w-0">
           <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-background/95 px-4 backdrop-blur lg:hidden">
@@ -107,15 +106,17 @@ function AppSidebar({
   pathname,
   user,
   onNavigate,
+  className,
 }: {
   pathname: string;
   user: DashboardShellProps["user"];
   onNavigate?: () => void;
+  className?: string;
 }) {
   return (
     <Sidebar
       variant="bordered"
-      className="flex h-dvh max-h-dvh flex-col overflow-hidden rounded-none border-0"
+      className={cn("flex h-dvh max-h-dvh flex-col overflow-hidden rounded-none border-0", className)}
     >
       <SidebarHeader className="shrink-0 border-b-0 px-6 py-3">
         <Link href="/" className="flex w-full items-center justify-center">
@@ -196,7 +197,7 @@ function AppSidebar({
           </DropdownMenuTrigger>
           <DropdownMenuContent
             align="end"
-            side="right"
+            side="top"
             sideOffset={8}
             className="w-64"
           >

components/layout/portal-shell.tsx

@@ -49,9 +49,12 @@ export function PortalShell({ children, user, progress }: PortalShellProps) {
   return (
     <div className="min-h-screen bg-background text-foreground">
       <div className="flex min-h-screen">
-        <aside className="sticky top-0 hidden h-dvh shrink-0 self-start border-r border-border bg-background lg:block">
+        <AppSidebar 
-          <AppSidebar pathname={pathname} user={user} progress={progress} />
+          pathname={pathname} 
-        </aside>
+          user={user} 
+          progress={progress}
+          className="sticky top-0 hidden shrink-0 self-start lg:block"
+        />
 
         {/* Mobile Sidebar Overlay */}
         {isMobileSidebarOpen && (
@@ -62,18 +65,15 @@ export function PortalShell({ children, user, progress }: PortalShellProps) {
         )}
 
         {/* Mobile Sidebar Drawer */}
-        <aside
-          className={`fixed inset-y-0 left-0 z-50 w-72 transform border-r border-border bg-background transition-transform duration-300 ease-in-out lg:hidden ${
-            isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
-          }`}
-        >
         <AppSidebar
           pathname={pathname}
           user={user}
           progress={progress}
           onNavigate={() => setIsMobileSidebarOpen(false)}
+          className={`fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out lg:hidden ${
+            isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
+          }`}
         />
-        </aside>
 
         <div className="flex flex-1 flex-col min-w-0">
           <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-background/95 px-4 backdrop-blur lg:hidden">
@@ -112,16 +112,18 @@ function AppSidebar({
   user,
   progress = 0,
   onNavigate,
+  className,
 }: {
   pathname: string;
   user: PortalShellProps["user"];
   progress?: number;
   onNavigate?: () => void;
+  className?: string;
 }) {
   return (
     <Sidebar
       variant="bordered"
-      className="flex h-dvh max-h-dvh flex-col overflow-hidden rounded-none border-0"
+      className={cn("flex h-dvh max-h-dvh flex-col overflow-hidden rounded-none border-0", className)}
     >
       <SidebarHeader className="shrink-0 border-b-0 px-6 py-3">
         <Link href="/portal" className="flex w-full items-center justify-center">
@@ -222,7 +224,7 @@ function AppSidebar({
           </DropdownMenuTrigger>
           <DropdownMenuContent
             align="end"
-            side="right"
+            side="top"
             sideOffset={8}
             className="w-64"
           >