From 95fb7649f23b3f89765d61498ff3159b16069968 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?=
 <mateusz.gruszczynski@firma.interia.pl>
Date: Mon, 4 May 2026 10:28:12 +0200
Subject: [PATCH] footer imrpove

---
 pytorrent/static/styles.css | 39 +++++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/pytorrent/static/styles.css b/pytorrent/static/styles.css
index 4762fc8..a20e2c2 100644
--- a/pytorrent/static/styles.css
+++ b/pytorrent/static/styles.css
@@ -944,23 +944,50 @@ body.mobile-mode #mobileList { padding-top: 5.2rem !important; }
 /* Footer preferences */
 .footer-preferences {
   display: grid;
-  gap: .5rem;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: .5rem;
 }
 
+/* Note: Footer switch cards mirror column cards so Bootstrap form-switch margins cannot push toggles outside the field. */
 .footer-pref-card {
-  align-items: center;
-  border: 1px solid var(--bs-border-color);
-  border-radius: .75rem;
   display: flex;
+  align-items: center;
   gap: .55rem;
+  min-width: 0;
   margin: 0;
   padding: .6rem .7rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: .75rem;
+  background: rgba(var(--bs-secondary-bg-rgb), .45);
+  cursor: pointer;
+  user-select: none;
+  transition: background .15s, border-color .15s;
+}
+
+.footer-pref-card:hover,
+.footer-pref-card.active {
+  background: var(--bs-primary-bg-subtle);
+}
+
+.footer-pref-card:hover {
+  border-color: var(--bs-primary);
 }
 
 .footer-pref-card.active {
-  background: rgba(var(--bs-primary-rgb), .08);
-  border-color: rgba(var(--bs-primary-rgb), .35);
+  border-color: rgba(var(--bs-primary-rgb), .55);
+}
+
+.footer-pref-card .form-check-input {
+  flex: 0 0 auto;
+  margin: 0;
+}
+
+.footer-pref-card .form-check-label {
+  min-width: 0;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 #statusClock,