Merge pull request #266 from ArnasDon/fix/settings-fullbleed-width

Settings: full-bleed layout for wide screens

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>

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

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

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

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

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

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;

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];