From f14e345b5216b5723e817b2f7e92b457e024e8a6 Mon Sep 17 00:00:00 2001
From: Flaminel <flm.marius@gmail.com>
Date: Mon, 20 Apr 2026 15:33:04 +0300
Subject: [PATCH] Add full width UI toggle (#572)

---
 .../src/app/core/services/theme.service.ts    | 23 +++++++++++++++++++
 .../src/app/layout/shell/shell.component.scss |  7 +++---
 .../app/layout/toolbar/toolbar.component.html |  8 +++++++
 .../app/layout/toolbar/toolbar.component.ts   |  5 ++++
 code/frontend/src/styles.scss                 |  5 ++++
 5 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/code/frontend/src/app/core/services/theme.service.ts b/code/frontend/src/app/core/services/theme.service.ts
index c33283a4..3014e5bf 100644
--- a/code/frontend/src/app/core/services/theme.service.ts
+++ b/code/frontend/src/app/core/services/theme.service.ts
@@ -4,14 +4,17 @@ export type Theme = 'dark' | 'light';
 
 const THEME_KEY = 'cleanuparr-theme';
 const PERFORMANCE_MODE_KEY = 'cleanuparr-performance-mode';
+const FULL_WIDTH_KEY = 'cleanuparr-full-width';
 
 @Injectable({ providedIn: 'root' })
 export class ThemeService {
   private readonly _theme = signal<Theme>('dark');
   private readonly _performanceMode = signal(false);
+  private readonly _fullWidth = signal(false);
 
   readonly theme = this._theme.asReadonly();
   readonly performanceMode = this._performanceMode.asReadonly();
+  readonly fullWidth = this._fullWidth.asReadonly();
 
   constructor() {
     this.restoreFromStorage();
@@ -41,6 +44,17 @@ export class ThemeService {
     localStorage.setItem(PERFORMANCE_MODE_KEY, String(value));
   }
 
+  toggleFullWidth(): void {
+    const next = !this._fullWidth();
+    this._fullWidth.set(next);
+    localStorage.setItem(FULL_WIDTH_KEY, String(next));
+  }
+
+  setFullWidth(value: boolean): void {
+    this._fullWidth.set(value);
+    localStorage.setItem(FULL_WIDTH_KEY, String(value));
+  }
+
   private restoreFromStorage(): void {
     const savedTheme = localStorage.getItem(THEME_KEY);
     if (savedTheme === 'light' || savedTheme === 'dark') {
@@ -51,6 +65,11 @@ export class ThemeService {
     if (saved === 'true') {
       this._performanceMode.set(true);
     }
+
+    const savedFullWidth = localStorage.getItem(FULL_WIDTH_KEY);
+    if (savedFullWidth === 'true') {
+      this._fullWidth.set(true);
+    }
   }
 
   private detectSystemPreferences(): void {
@@ -68,5 +87,9 @@ export class ThemeService {
     effect(() => {
       document.documentElement.setAttribute('data-performance-mode', String(this._performanceMode()));
     });
+
+    effect(() => {
+      document.documentElement.setAttribute('data-full-width', String(this._fullWidth()));
+    });
   }
 }
diff --git a/code/frontend/src/app/layout/shell/shell.component.scss b/code/frontend/src/app/layout/shell/shell.component.scss
index 5403e365..385d98e3 100644
--- a/code/frontend/src/app/layout/shell/shell.component.scss
+++ b/code/frontend/src/app/layout/shell/shell.component.scss
@@ -71,8 +71,9 @@
   }
 
   &__content {
+    --content-padding: var(--space-6);
     flex: 1;
-    padding: var(--space-6);
+    padding: var(--content-padding);
     overflow-y: auto;
     scroll-behavior: smooth;
     max-width: var(--content-max-width);
@@ -97,7 +98,7 @@
 
   // Tablet layout
   &--collapsed &__content {
-    padding: var(--space-5);
+    --content-padding: var(--space-5);
   }
 
   // Mobile layout
@@ -106,7 +107,7 @@
   }
 
   &--mobile &__content {
-    padding: var(--space-4);
+    --content-padding: var(--space-4);
     overflow-x: hidden;
   }
 }
diff --git a/code/frontend/src/app/layout/toolbar/toolbar.component.html b/code/frontend/src/app/layout/toolbar/toolbar.component.html
index 2a99864c..67f673a7 100644
--- a/code/frontend/src/app/layout/toolbar/toolbar.component.html
+++ b/code/frontend/src/app/layout/toolbar/toolbar.component.html
@@ -14,6 +14,14 @@
       <ng-icon [name]="theme() === 'dark' ? 'tablerSun' : 'tablerMoon'" />
     </button>
 
+    <app-tooltip text="Expands page content edge-to-edge on wide monitors, removing the default width cap.">
+      <app-toggle
+        [label]="'Full width'"
+        [checked]="fullWidth()"
+        (checkedChange)="onToggleFullWidth()"
+      />
+    </app-tooltip>
+
     <app-tooltip text="Disables animations and visual effects for better UI performance. Auto-enabled when your system prefers reduced motion.">
       <app-toggle
         [label]="'Performance mode'"
diff --git a/code/frontend/src/app/layout/toolbar/toolbar.component.ts b/code/frontend/src/app/layout/toolbar/toolbar.component.ts
index a9e290cc..c3c8cd8c 100644
--- a/code/frontend/src/app/layout/toolbar/toolbar.component.ts
+++ b/code/frontend/src/app/layout/toolbar/toolbar.component.ts
@@ -19,6 +19,7 @@ export class ToolbarComponent {
 
   theme = this.themeService.theme;
   performanceMode = this.themeService.performanceMode;
+  fullWidth = this.themeService.fullWidth;
 
   onToggleTheme(): void {
     this.themeService.toggleTheme();
@@ -28,6 +29,10 @@ export class ToolbarComponent {
     this.themeService.togglePerformanceMode();
   }
 
+  onToggleFullWidth(): void {
+    this.themeService.toggleFullWidth();
+  }
+
   onToggleSidebar(): void {
     this.toggleSidebar.emit();
   }
diff --git a/code/frontend/src/styles.scss b/code/frontend/src/styles.scss
index 4767e962..1d711fa1 100644
--- a/code/frontend/src/styles.scss
+++ b/code/frontend/src/styles.scss
@@ -7,6 +7,11 @@
 @use 'styles/scrollbar';
 @use 'styles/animations';
 
+// Full-width toggle
+:root[data-full-width="true"] .shell__content {
+  max-width: none;
+}
+
 // Skeleton loading utility - add class="skeleton" to any element
 .skeleton {
   background: linear-gradient(