ux, and themes

pytorrent/static/styles.css

@@ -840,12 +840,15 @@ body.resizing-details {
 }
 
 .toast-count {
-  flex: 0 0 auto;
-  padding: 0.05rem 0.35rem;
-  border-radius: 999px;
+  align-items: center;
   background: rgba(255, 255, 255, 0.22);
+  border-radius: 999px;
+  display: inline-flex;
+  flex: 0 0 auto;
   font-size: 0.78rem;
   font-weight: 700;
+  gap: 0.1rem;
+  padding: 0.05rem 0.35rem;
 }
 @media (max-width: 1100px) {
   :root {
@@ -4494,13 +4497,47 @@ body,
 
 .peer-host {
   display: inline-block;
-  max-width: 220px;
+  max-width: min(54vw, 100%);
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
   white-space: nowrap;
 }
 
+.peers-table th:nth-child(3),
+.peers-table td:nth-child(3) {
+  min-width: clamp(14rem, 26vw, 34rem);
+}
+
+@media (max-width: 900px) {
+  .peer-host {
+    max-width: 100%;
+  }
+}
+
+
+/* App modal widths stay consistent while Bootstrap still handles full-screen mobile breakpoints. */
+.app-modal-dialog,
+.modal-dialog.modal-xl {
+  --bs-modal-width: min(1140px, calc(100vw - 2rem));
+}
+
+@media (max-width: 575.98px) {
+  .app-modal-dialog {
+    --bs-modal-width: 100vw;
+  }
+}
+
+/* Current rTorrent settings uses the same card rhythm as Diagnostics for faster scanning. */
+.rt-config-current-summary {
+  margin-bottom: 1rem;
+}
+
+.rt-config-value-note {
+  word-break: break-word;
+}
+
 .file-row-actions {
   align-items: center;
   display: inline-flex;
@@ -5081,3 +5118,63 @@ body.compact-torrent-list .mobile-progress .torrent-progress {
   opacity: 0.85;
   pointer-events: none;
 }
+
+
+/* Note: Mobile sort uses Font Awesome icons instead of text arrows to avoid broken glyph spacing. */
+.mobile-sort-cycle-label {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.45rem;
+  justify-content: center;
+  min-width: 0;
+}
+
+.mobile-sort-cycle-label i {
+  flex: 0 0 auto;
+  line-height: 1;
+  width: 1rem;
+}
+
+/* Note: Planner Current Settings inherits Poller Diagnostics card chrome from .smart-setting-row. */
+.planner-current-summary {
+  align-items: flex-start;
+}
+
+.planner-diagnostic-line {
+  align-items: center;
+  color: var(--bs-secondary-color);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem 0.55rem;
+  line-height: 1.45;
+  margin-top: 0.2rem;
+}
+
+/* Note: Keep each Current Settings entry on a single visual line so labels do not break above values. */
+.planner-diagnostic-item {
+  align-items: baseline;
+  display: inline-flex;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.planner-diagnostic-item b {
+  color: var(--bs-body-color);
+  display: inline;
+  font-weight: 700;
+}
+
+
+/* Note: Add breathing room around Current Settings separators to match Poller Diagnostics readability. */
+.planner-diagnostic-line .diagnostic-separator {
+  margin: 0 0.18rem;
+}
+
+.diagnostic-separator,
+.modal-meta-separator {
+  color: var(--bs-secondary-color);
+  font-size: 0.38rem;
+  opacity: 0.8;
+  vertical-align: middle;
+}
+