footer imrpove

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,