From 60d401f5ea3a45dd7a56cdf8ce86ab053018a8ba Mon Sep 17 00:00:00 2001
From: MacRimi <ricoextincion@gmail.com>
Date: Mon, 30 Mar 2026 20:19:00 +0200
Subject: [PATCH] Update settings.tsx

---
 AppImage/components/settings.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/AppImage/components/settings.tsx b/AppImage/components/settings.tsx
index 4f6a50be..287b9196 100644
--- a/AppImage/components/settings.tsx
+++ b/AppImage/components/settings.tsx
@@ -601,8 +601,8 @@ export function Settings() {
                 <span className="text-xs font-medium text-muted-foreground text-center w-20">Alerts</span>
               </div>
               
-              {/* Storage rows */}
-              <div className="divide-y divide-border/50">
+              {/* Storage rows - scrollable container */}
+              <div className="max-h-[320px] overflow-y-auto divide-y divide-border/50">
                 {remoteStorages.map((storage) => {
                   const isExcluded = storage.exclude_health || storage.exclude_notifications
                   const isSaving = savingStorage === storage.name
@@ -641,6 +641,7 @@ export function Settings() {
                                 storage.exclude_notifications
                               )
                             }}
+                            className="data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input border border-border"
                           />
                         )}
                       </div>
@@ -659,6 +660,7 @@ export function Settings() {
                                 !checked
                               )
                             }}
+                            className="data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input border border-border"
                           />
                         )}
                       </div>
@@ -712,8 +714,8 @@ export function Settings() {
                 <span className="text-xs font-medium text-muted-foreground text-center w-20">Alerts</span>
               </div>
               
-              {/* Interface rows */}
-              <div className="divide-y divide-border/50">
+              {/* Interface rows - scrollable container */}
+              <div className="max-h-[320px] overflow-y-auto divide-y divide-border/50">
                 {networkInterfaces.map((iface) => {
                   const isExcluded = iface.exclude_health || iface.exclude_notifications
                   const isSaving = savingInterface === iface.name
@@ -765,6 +767,7 @@ export function Settings() {
                                 iface.exclude_notifications
                               )
                             }}
+                            className="data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input border border-border"
                           />
                         )}
                       </div>
@@ -784,6 +787,7 @@ export function Settings() {
                                 !checked
                               )
                             }}
+                            className="data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input border border-border"
                           />
                         )}
                       </div>