From 1de99be73a0e9e163b5e8b547b0759168889e7e7 Mon Sep 17 00:00:00 2001
From: Arnas Donauskas <arnas.donauskas@hostinger.com>
Date: Thu, 18 Jun 2026 15:30:41 +0300
Subject: [PATCH] fix(settings): full-bleed layout so the page fills wide
 screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Settings page was the only dashboard route capped at
max-w-[1040px] mx-auto, so it floated centered with large empty
gutters on wide monitors while every other page is full-bleed.

Remove the cap so the page fills the available width like the rest of
the app, and spend the space where it helps readability:
- Overview status tiles go 3-up on xl (from 2-up).
- Templates list goes 2-up on xl.
- Form-heavy panels (Profile, Login & security, Deals) keep a readable
  max-w-2xl; Fields & tags and Appearance use max-w-3xl — so inputs
  don't stretch edge-to-edge on large displays.
- Grid uses minmax(0,1fr) to avoid blowout from long content.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/(dashboard)/settings/page.tsx             | 4 ++--
 src/components/settings/appearance-panel.tsx      | 2 +-
 src/components/settings/deals-settings.tsx        | 2 +-
 src/components/settings/fields-and-tags-panel.tsx | 2 +-
 src/components/settings/profile-form.tsx          | 2 +-
 src/components/settings/security-panel.tsx        | 2 +-
 src/components/settings/settings-overview.tsx     | 2 +-
 src/components/settings/template-manager.tsx      | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/(dashboard)/settings/page.tsx b/src/app/(dashboard)/settings/page.tsx
index ff4f6f2..7f607b3 100644
--- a/src/app/(dashboard)/settings/page.tsx
+++ b/src/app/(dashboard)/settings/page.tsx
@@ -62,7 +62,7 @@ export default function SettingsPage() {
   };
 
   return (
-    <div className="mx-auto max-w-[1040px]">
+    <div>
       <div>
         <h1 className="text-2xl font-bold tracking-tight text-foreground">
           Settings
@@ -73,7 +73,7 @@ export default function SettingsPage() {
         </p>
       </div>
 
-      <div className="mt-6 grid gap-6 lg:grid-cols-[236px_1fr] lg:items-start">
+      <div className="mt-6 grid gap-6 lg:grid-cols-[236px_minmax(0,1fr)] lg:items-start">
         <SettingsRail active={section} onSelect={go} hints={hints} />
         <div className="min-w-0">{panel[section]}</div>
       </div>
diff --git a/src/components/settings/appearance-panel.tsx b/src/components/settings/appearance-panel.tsx
index 693608d..0a83bd7 100644
--- a/src/components/settings/appearance-panel.tsx
+++ b/src/components/settings/appearance-panel.tsx
@@ -22,7 +22,7 @@ import { SettingsPanelHead } from "./settings-panel-head";
 export function AppearancePanel() {
   const { theme, setTheme, mode, setMode } = useTheme();
   return (
-    <section className="animate-in fade-in-50 duration-200">
+    <section className="max-w-3xl animate-in fade-in-50 duration-200">
       <SettingsPanelHead
         title="Appearance"
         description="Set the mode and accent colour used across the app. Saved to this device — try it, it changes live."
diff --git a/src/components/settings/deals-settings.tsx b/src/components/settings/deals-settings.tsx
index 0ae6842..1e8d1a4 100644
--- a/src/components/settings/deals-settings.tsx
+++ b/src/components/settings/deals-settings.tsx
@@ -68,7 +68,7 @@ export function DealsSettings() {
   }
 
   return (
-    <section className="animate-in fade-in-50 duration-200">
+    <section className="max-w-2xl animate-in fade-in-50 duration-200">
       <SettingsPanelHead
         title="Deals & currency"
         description="The currency used for new deals and for pipeline and dashboard totals."
diff --git a/src/components/settings/fields-and-tags-panel.tsx b/src/components/settings/fields-and-tags-panel.tsx
index a4d92f7..3e7f276 100644
--- a/src/components/settings/fields-and-tags-panel.tsx
+++ b/src/components/settings/fields-and-tags-panel.tsx
@@ -17,7 +17,7 @@ export function FieldsAndTagsPanel() {
   const canEditSettings = useCan('edit-settings');
 
   return (
-    <section className="animate-in fade-in-50 space-y-4 duration-200">
+    <section className="max-w-3xl animate-in fade-in-50 space-y-4 duration-200">
       <SettingsPanelHead
         title="Fields & tags"
         description="Two ways to organize contacts: colour-coded tags for quick grouping, and custom fields for structured data."
diff --git a/src/components/settings/profile-form.tsx b/src/components/settings/profile-form.tsx
index 20593f8..c6f0eae 100644
--- a/src/components/settings/profile-form.tsx
+++ b/src/components/settings/profile-form.tsx
@@ -205,7 +205,7 @@ export function ProfileForm() {
     : '—';
 
   return (
-    <section className="animate-in fade-in-50 duration-200">
+    <section className="max-w-2xl animate-in fade-in-50 duration-200">
       <SettingsPanelHead
         title="Your profile"
         description="How you show up across the app. Your avatar and name appear in the header, sidebar, and anywhere your teammates see you."
diff --git a/src/components/settings/security-panel.tsx b/src/components/settings/security-panel.tsx
index 736a149..948274a 100644
--- a/src/components/settings/security-panel.tsx
+++ b/src/components/settings/security-panel.tsx
@@ -10,7 +10,7 @@ import { SettingsPanelHead } from './settings-panel-head';
  */
 export function SecurityPanel() {
   return (
-    <section className="animate-in fade-in-50 duration-200">
+    <section className="max-w-2xl animate-in fade-in-50 duration-200">
       <SettingsPanelHead
         title="Login & security"
         description="Change your password and sign out of your devices. These keep your account safe."
diff --git a/src/components/settings/settings-overview.tsx b/src/components/settings/settings-overview.tsx
index 73b5f5d..fff559a 100644
--- a/src/components/settings/settings-overview.tsx
+++ b/src/components/settings/settings-overview.tsx
@@ -248,7 +248,7 @@ export function SettingsOverview({
       </Card>
 
       {/* Status tiles */}
-      <div className="mt-4 grid gap-3 sm:grid-cols-2">
+      <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
         {tiles.map(({ section, loading, subtitle }) => {
           const meta = SECTION_META[section];
           const Icon = meta.icon;
diff --git a/src/components/settings/template-manager.tsx b/src/components/settings/template-manager.tsx
index f36bb37..0d6ab27 100644
--- a/src/components/settings/template-manager.tsx
+++ b/src/components/settings/template-manager.tsx
@@ -515,7 +515,7 @@ export function TemplateManager() {
           </CardContent>
         </Card>
       ) : (
-        <div className="grid gap-3">
+        <div className="grid gap-3 xl:grid-cols-2">
           {templates.map((template) => {
             const statusKey = template.status || 'DRAFT';
             const status = templateStatusConfig[statusKey];