diff --git a/web/style.css b/web/style.css
index 96df542..a59cab8 100644
--- a/web/style.css
+++ b/web/style.css
@@ -21,6 +21,7 @@ html,body {
   color: #1f2937;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
+  overflow-x: hidden; /* prevent accidental horizontal scroll on mobile */
 }
 
 a { color: var(--accent); text-decoration: none; }
@@ -130,8 +131,6 @@ a { color: var(--accent); text-decoration: none; }
   font-weight: 700;
   color: #0f172a;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 /* Buttons row - span full width of controls grid */
@@ -330,6 +329,7 @@ a { color: var(--accent); text-decoration: none; }
   box-shadow: var(--shadow);
   max-height: 420px;
   overflow-y: auto;
+  overflow-x: hidden; /* avoid horizontal overflow from long items */
   border: 1px solid rgba(15,23,42,0.04);
   position: relative; /* keep content contained */
   z-index: 0;
@@ -348,6 +348,9 @@ a { color: var(--accent); text-decoration: none; }
   transition: background .12s ease, transform .08s ease;
   background: transparent;
   z-index: 1;
+  overflow: hidden;                /* contain long text */
+  word-break: break-word;          /* break very long words/paths */
+  overflow-wrap: anywhere;         /* allow wrapping anywhere if needed */
 }
 .playlist-container li:hover {
   background: linear-gradient(90deg, rgba(37,99,235,0.04), rgba(37,99,235,0.02));
@@ -377,6 +380,8 @@ a { color: var(--accent); text-decoration: none; }
   color: #0f172a;
   font-size: 0.95rem;
   line-height: 1.35;
+  word-break: break-word;     /* wrap long mapping values */
+  overflow-wrap: anywhere;
 }
 
 /* Align info row */
@@ -476,7 +481,8 @@ a { color: var(--accent); text-decoration: none; }
     grid-template-columns: 1fr;
     padding: 8px;
   }
-  .player-card { flex-direction: row; gap: 14px; padding: 14px; }
+  /* switch to flex to avoid grid min-content overflow on small screens */
+  .player-card { display: flex; flex-direction: column; gap: 14px; padding: 14px; }
   .artwork { width: 120px; height: 120px; }
   .play-button { width: 72px; height: 72px; }
   .playlist { order: 2; }
@@ -484,8 +490,18 @@ a { color: var(--accent); text-decoration: none; }
 }
 
 @media (max-width: 520px) {
-  .topbar { padding: 10px; }
+  .topbar { padding: 10px; flex-wrap: wrap; }
   .brand h1 { font-size: 1rem; }
+  .status {
+    min-width: 0;              /* allow shrinking */
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 100%;
+    order: 3;                  /* move status below brand on very small devices */
+    text-align: left;
+  }
   .artwork { width: 96px; height: 96px; }
   .play-button { width: 64px; height: 64px; }
   .control-row { gap: 8px; }