mobile ux

pytorrent/static/styles.css

@@ -786,6 +786,7 @@ body {
 }
 .mobile-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.35rem;
   margin-top: 0.45rem;
 }
@@ -860,15 +861,38 @@ body.mobile-mode .main-grid {
   border-radius: 0.5rem;
   background: var(--bs-body-bg);
 }
-.label-filters .label-filter {
+.label-filters .label-filter,
+.tracker-filters .tracker-filter {
   font-size: 0.82rem;
   padding: 0.34rem 0.5rem;
   margin-bottom: 0.15rem;
 }
-.label-filters .label-filter i {
+.label-filters .label-filter i,
+.tracker-filters .tracker-filter i {
   opacity: 0.75;
   margin-right: 0.25rem;
 }
+
+.tracker-filters .tracker-filter span:first-child {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.tracker-favicon {
+  border-radius: 0.2rem;
+  flex: 0 0 auto;
+  height: 16px;
+  object-fit: contain;
+  width: 16px;
+}
+
+.tracker-favicon:not(.d-none) + .tracker-fallback-icon {
+  display: none;
+}
+
+
 .column-manager {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
@@ -1569,11 +1593,12 @@ body.mobile-mode .mobile-card {
 }
 .mobile-filter-actions,
 .mobile-filter-select-row {
-  display: flex;
   align-items: center;
+  display: flex;
   gap: 0.35rem;
 }
 .mobile-filter-actions {
+  flex-wrap: wrap;
   margin-bottom: 0.4rem;
 }
 .mobile-filter-actions span {