Fix dashboard card layout, icons, alignment, and memory card visibility

- Docker/VM tiles: wrap containers into columns instead of horizontal scroll
- Add 6 missing ICON_MAP entries + fireflyiii/minecraft icon assets
- Card title icons: align-items flex-start so icons sit beside h3, not below
- Scope .head_bar hide rule to Processor card to stop hiding Memory card header

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/icons/fireflyiii-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M197 351.3c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5 3.4-7.5 7.5-7.5m230.8.8c-5.1-38.5-23.3-37.5-31.4-66.9s17.6-22.2-4.1-72.7c0 0-9.6-24-46.2-41.4-23.5-11.1-7.5-61.5-49.1-112.2S215.6 0 215.6 0s19.5 66.2-18 104.7-33.5 81.1-18.3 101.4 14.2 35.5 2 46.7-22.3 19.3-29.4 1-15.2-18.3-18.3-27.4-9.1-25.4-9.1-25.4-19.3 30.4-31.4 48.7-12.2 46.7-4.1 61.9 5.1 33.5-1 58.8c-6.1 25.4 2 63.9 30.4 79.1s62.9 27.4 78.1 41.6 50.7 27.4 96.4 17.2c45.6-10.1 103.5-56.8 113.6-88.2 0 0 26.4-29.4 21.3-68m-80.1 86.3v19.8c-3.6 7.1-9.6 9.5-29.7 9.5s-22.9-5.5-22.9-5.5v-4c-30.9 4-47.7 0-47.7 0 0 3.5 0 4.1-3 7.1s-21.4 3.2-35.2 1.2c-13.9-2-12.3-8.7-12.3-8.7v-20.2c-22.6-15.9-28.9-40-28.9-40l-13 .3c-7.1 0-10.1-9.1-10.1-9.1v-29.4c0-9.2 9.1-11.2 9.1-11.2l12.7-1c4.3-30.4 36-53.8 36-53.8l-1.8-41.9c34.2-6.2 53.4 28.6 53.5 28.6 38-4.6 75.4 3.3 93.3 20.1 15.7 14.7 27.4 27.8 28.3 65.6 1 43.9-28.3 72.6-28.3 72.6m28.9-89.1-1.9-9.3s-14.4-6.9-32.2 3.2c0 0-21.1-7.1-32.4 2.1-11.7 9.5-12.9 20.7-12.3 33.8 0 0 10.2-34.7 35.8-25.8 0 0-18.2 32 10.1 37.6 0 0 6.7 0 12.2-3.4 5.3-3.2 9.4-9 7.7-19.6 0 0-3.4-10.6-12.3-16.9 0 0 8.7-6.2 25.3-1.7m-25.2 18.5c5.5 9-3.9 13.5-3.9 13.5-17.6 1.4-4.4-23.5-4.4-23.5s2.7.6 8.3 10" style="fill:#fff"/></svg>

assets/icons/minecraft-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M474.3 129.5c0-.2-.1-.3-.2-.5-.1-.3-.2-.7-.4-1-.1-.2-.3-.4-.4-.6-.2-.2-.3-.5-.6-.7-.2-.2-.4-.4-.7-.5-.2-.2-.4-.3-.6-.5h-.1L259.2.9c-2-1.2-4.4-1.2-6.3 0L40.6 125.7h-.1c-.2.1-.4.3-.6.5s-.5.3-.7.5-.4.5-.6.7c-.1.2-.3.4-.4.6-.2.3-.3.7-.4 1-.1.2-.2.3-.2.5-.1.5-.2 1.1-.2 1.6v249.8c0 2.2 1.2 4.3 3.1 5.4l212.3 124.9c.3.2.6.3 1 .4.2.1.4.2.5.2.5.1 1.1.2 1.6.2s1.1-.1 1.6-.2c.2 0 .4-.2.5-.2.3-.1.6-.2 1-.4l212.3-124.9c1.9-1.1 3.1-3.2 3.1-5.4V131.1c.1-.5.1-1.1-.1-1.6M50 197.3l20 11.9.6-31.2 26.2 15.6v31.2l26.8 15.6 26.2 15.6v31.2l26.5 15.6v-31.2l26.5 15.6V256l26.5 15.6V334l20.3 11.9v148.9L50 377.3zm212.2 297.5v-180l20.3-11.9v-31.2l26.5-15.6v31.2l53.1-31.2v31.2l26.5-15.6v-31.2l26.5-15.6v-31.2l26.5-15.6v62.4l20.3-11.9v148.9z" style="fill:#fff"/></svg>

sidebar.js

@@ -219,7 +219,13 @@
     'urbackup':             'networking-toolbox',
     'seekandwatch':         'databasement',
     'unmarr':               'homarr',
-    'dockhand':             'docker'
+    'dockhand':             'docker',
+    'firefly-data-importer': 'fireflyiii',
+    'fireflyiii':           'fireflyiii',
+    'home-assistant-container': 'home-assistant',
+    'home-assistant-time-machine': 'apple',
+    'termix':               'networking-toolbox',
+    'tuyagateway':          'home-assistant'
   };
 
   // Resolve container name to selfh.st CDN URL

style.css

@@ -104,6 +104,13 @@ body::before {
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
 }
 
+/* Notification bell SVG in header — force white */
+#header #UserProfile svg,
+#header svg {
+  color: rgba(255, 255, 255, 0.9) !important;
+  fill: currentColor !important;
+}
+
 
 /* ============================================
    SIDEBAR: Collapsed (icons only, NO hover expand)
@@ -1015,7 +1022,7 @@ table.dashboard > tbody.sortable {
   border-radius: var(--glass-radius) !important;
   box-shadow: none !important;
   margin-bottom: 20px !important;
-  padding-bottom: 14px !important;
+  padding-bottom: 16px !important;
   overflow: hidden !important;
   position: relative;
   transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
@@ -1054,8 +1061,8 @@ table.dashboard > tbody.sortable > tr:last-child {
 }
 
 /* Hide compact Load: row in Processor card — Overall Load row shows same info.
-   Unraid's DashStats.css hides span.switch but the row keeps 33px of padding/gap */
+   Scoped to .system tbody to avoid hiding Memory card header which also has .head_bar */
-table.dashboard > tbody.sortable > tr:has(.head_bar) {
+table.dashboard > tbody.system.sortable > tr:has(.head_bar) {
   display: none !important;
 }
 
@@ -1070,6 +1077,12 @@ table.dashboard > tbody.sortable > tr > td {
   background: transparent !important;
 }
 
+/* Docker/VM container grid: wrap into columns instead of horizontal scroll */
+#docker_view > tr:not(:first-child) > td,
+#vm_view > tr:not(:first-child) > td {
+  white-space: normal !important;
+}
+
 /* Header row of each card */
 table.dashboard > tbody.sortable > tr:first-child {
   background: transparent !important;
@@ -1105,6 +1118,26 @@ span.tile-header-right .fa:hover {
   color: rgba(255, 255, 255, 0.85) !important;
 }
 
+/* Card control icons (cog, film, chevron) — ensure white on all cards
+   including Plex Streams which uses raw FA icons without .tile-header */
+table.dashboard i.control,
+table.dashboard .fa.control {
+  color: rgba(255, 255, 255, 0.55) !important;
+  background: transparent !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+table.dashboard i.control:hover,
+table.dashboard .fa.control:hover {
+  color: rgba(255, 255, 255, 0.85) !important;
+}
+
+/* Plex Streams icon — white */
+table.dashboard i.fa-film.icon {
+  color: var(--glass-text) !important;
+}
+
 /* Tile header layout */
 span.tile-header {
   display: flex !important;
@@ -1115,11 +1148,17 @@ span.tile-header {
 
 span.tile-header-left {
   display: flex !important;
-  align-items: center !important;
+  align-items: flex-start !important;
   gap: 10px !important;
   flex: 1 !important;
 }
 
+/* Align card title icons with h3 text */
+span.tile-header-left > i.f32 {
+  margin-top: 2px !important;
+  flex-shrink: 0 !important;
+}
+
 /* Stopgap spacers → hidden (card margins handle spacing) */
 table.dashboard > thead.stopgap {
   display: none !important;
@@ -1178,15 +1217,11 @@ table.dashboard .usage-bar > span:last-child {
   pointer-events: none !important;
 }
 
-/* Dashboard CPU rows: consistent height so borders don't clip bars */
+/* Dashboard CPU rows: consistent height so borders don't clip bars
-table.dashboard > tbody.sortable > tr {
+   Scoped to rows containing usage bars (processor/memory cards only) */
-  height: 32px !important;
+table.dashboard > tbody.sortable > tr > td > .usage-disk,
-}
+table.dashboard > tbody.sortable > tr > td > span > .usage-disk {
-
+  margin: 4px 0 !important;
-/* Dashboard CPU core labels + bar wrappers: matching line-height */
-table.dashboard > tbody.sortable > tr > td {
-  line-height: 36px !important;
-  vertical-align: middle !important;
 }
 
 /* Dashboard CPU show/hide link — parent flex container needs full width */
@@ -1215,6 +1250,30 @@ table.dashboard img {
   border-radius: 6px !important;
 }
 
+/* Dashboard selects — compact height (global select gets 8px 12px padding, too tall for cards) */
+table.dashboard select {
+  padding: 4px 8px !important;
+  font-size: 12px !important;
+  border-radius: 8px !important;
+}
+
+/* Dashboard container status text — tighter spacing to container name */
+#docker_view span.inner,
+#vm_view span.inner {
+  line-height: 1.3 !important;
+}
+
+#docker_view .folder-appname-docker,
+#docker_view span.appname {
+  margin-bottom: 0 !important;
+}
+
+#docker_view span.state,
+#vm_view span.state {
+  font-size: 0.8em !important;
+  margin-top: 0 !important;
+}
+
 /* --- Docker / VM container grid fixes --- */
 
 /* Container items in dashboard */
@@ -1222,6 +1281,9 @@ table.dashboard span.outer {
   background: transparent !important;
   border: none !important;
   border-bottom: none !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 100% !important;
 }
 
 /* Folder showcase containers */
@@ -1288,6 +1350,7 @@ table.dashboard span.appname a:hover {
 /* CPU chart — force block display (inline style sets table-row, breaking layout) */
 #cpu_chart {
   display: block !important;
+  padding-bottom: 8px !important;
 }
 
 /* CPU chart canvas — invert for dark background, block to prevent inline offset */
@@ -1298,10 +1361,12 @@ table.dashboard span.appname a:hover {
 
 #cpu_chart td {
   width: 100% !important;
+  padding-bottom: 4px !important;
 }
 
 #cpu_chart canvas {
   width: 100% !important;
+  display: block !important;
 }
 
 /* System donut charts — thinner ring with opaque center */
@@ -1401,6 +1466,23 @@ nav.tabs {
   display: flex !important;
   gap: 6px !important;
   flex-wrap: wrap !important;
+  position: relative !important;
+}
+
+/* Move status icon (disk I/O toggle) inline with tabs instead of wrapping to new row */
+nav.tabs .status {
+  position: absolute !important;
+  right: 0 !important;
+  top: 6px !important;
+  margin: 0 !important;
+}
+
+nav.tabs .status a {
+  color: var(--glass-text-muted) !important;
+}
+
+nav.tabs .status a:hover {
+  color: var(--glass-text) !important;
 }
 
 nav.tabs button {
@@ -1649,6 +1731,13 @@ a[href*="forums.unraid.net"] {
    DOCKER & VM LIST PAGES (advanced table view)
    ============================================ */
 
+/* Docker/VM page tables: allow horizontal scroll on wrapper */
+.TableContainer {
+  overflow-x: auto !important;
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
+  scrollbar-width: thin !important;
+}
+
 /* Table header bar on Docker/VM pages */
 #docker_list thead,
 #vm_list thead,
@@ -1766,11 +1855,21 @@ img.folder-img-docker {
   filter: brightness(0) invert(1) !important;
 }
 
-/* Folder dropdown button */
+/* Folder dropdown button — small circle with chevron */
 button[class*="dropDown-"] {
   background: rgba(255, 255, 255, 0.06) !important;
   border: 1px solid rgba(255, 255, 255, 0.10) !important;
   color: var(--glass-text-muted) !important;
+  width: 28px !important;
+  height: 28px !important;
+  min-width: 28px !important;
+  padding: 0 !important;
+  border-radius: 50% !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  vertical-align: middle !important;
+  font-size: 12px !important;
 }
 
 button[class*="dropDown-"]:hover {
@@ -1779,6 +1878,27 @@ button[class*="dropDown-"]:hover {
   color: var(--glass-text) !important;
 }
 
+/* Docker autostart column — center switch vertically */
+td.folder-autostart,
+td[class*="autostart"] {
+  text-align: center !important;
+  vertical-align: middle !important;
+}
+
+td.folder-autostart .switch-button-background,
+td[class*="autostart"] .switch-button-background {
+  margin: 0 auto !important;
+}
+
+/* Switch button labels (Basic View / Advanced View, ON/OFF) — center */
+.switch-button-label {
+  display: block !important;
+  text-align: center !important;
+  font-size: 11px !important;
+  color: var(--glass-text-muted) !important;
+  margin-top: 2px !important;
+}
+
 
 /* ============================================
    MISC INNER PAGE ELEMENTS
@@ -1913,6 +2033,11 @@ span.dfm_filter > i.fa-filter {
 
 span.dfm_filter > input.dfm_filter {
   padding: 5px 12px 5px 30px !important;
+  color: #fff !important;
+}
+
+span.dfm_filter > input.dfm_filter::placeholder {
+  color: rgba(255, 255, 255, 0.4) !important;
 }
 
 /* File manager toggle (time/size) */
@@ -2110,12 +2235,17 @@ a.ca_categories {
   color: var(--glass-text-muted) !important;
 }
 
-/* Card description fade-out gradient — match glass bg */
+/* Card description fade-out gradient — transparent instead of dark */
 .cardDesc::after {
-  background: linear-gradient(to right,
+  background: transparent !important;
-    transparent 0%,
+  display: none !important;
-    rgba(255, 255, 255, 0.03) 50%,
+}
-    rgba(30, 30, 40, 0.6) 100%) !important;
+
+/* Card description — allow text to wrap and ellipsis naturally */
+.cardDesc {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  padding-bottom: 4px !important;
 }
 
 /* --- Buttons (caButton) --- */
@@ -2156,7 +2286,16 @@ a.caButton:hover {
 
 /* --- Home templates horizontal scroll area --- */
 .ca_homeTemplates {
-  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
+  scrollbar-width: thin !important;
+  padding-bottom: 8px !important;
+}
+
+/* App card box-sizing to prevent individual card overflow */
+.ca_appPopup {
+  box-sizing: border-box !important;
 }
 
 /* --- Alternate view (app detail popup) --- */
@@ -2680,13 +2819,12 @@ table.tablesorter.indexer tbody tr:hover {
   overflow: visible !important;
 }
 
-/* Docker #1: folder-preview wrapper has opaque glass bg.
+/* Docker #1: folder-preview wrapper — nearly invisible so
-   Make it more subtle/transparent so container items
+   container items don't appear in a "tab-like" wrapper. */
-   don't appear in a "tab-like" wrapper. */
 .folder-preview,
 div[class*="folder-preview"] {
-  background: rgba(255, 255, 255, 0.03) !important;
+  background: transparent !important;
-  border: 1px solid rgba(255, 255, 255, 0.06) !important;
+  border: 1px solid rgba(255, 255, 255, 0.04) !important;
   border-radius: 10px !important;
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
@@ -2727,6 +2865,13 @@ td.folder-storage {
   margin: 0 8px !important;
 }
 
+/* Tabpanels (ZFS Master, Boot Device, etc.): allow horizontal scroll */
+[role="tabpanel"] {
+  overflow-x: auto !important;
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
+  scrollbar-width: thin !important;
+}
+
 /* Fix stacked panels: don't apply to tabpanel children
    which have their own panel structure */
 [role="tabpanel"] div.Panel + div.Panel {
@@ -2743,3 +2888,113 @@ td.folder-storage {
   border-radius: var(--glass-radius) !important;
   margin-bottom: 16px !important;
 }
+
+/* ===== Bug #9: Toggle icon visibility (Shares Browse, etc.) ===== */
+i.fa.fa-toggle-off,
+i.fa.fa-toggle-on {
+  color: var(--glass-text-muted) !important;
+  font-size: 18px !important;
+  cursor: pointer !important;
+  transition: color 0.2s ease !important;
+}
+
+i.fa.fa-toggle-on {
+  color: var(--glass-accent) !important;
+}
+
+i.fa.fa-toggle-off:hover,
+i.fa.fa-toggle-on:hover {
+  color: var(--glass-text) !important;
+}
+
+/* ===== Bug #11: Share Settings — merge two glass cards into one ===== */
+div.relative:has(> div.clone-settings) {
+  background: rgba(255, 255, 255, 0.06) !important;
+  backdrop-filter: blur(30px) saturate(1.3) !important;
+  -webkit-backdrop-filter: blur(30px) saturate(1.3) !important;
+  border: 1px solid var(--glass-border) !important;
+  border-radius: var(--glass-radius) !important;
+  padding: 16px !important;
+  margin-bottom: 16px !important;
+  overflow: hidden !important;
+}
+
+#displaybox div.relative:has(> div.clone-settings) > div.clone-settings {
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  border: none !important;
+  border-radius: 0 !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
+  margin: 0 0 16px !important;
+  padding: 0 0 16px !important;
+}
+
+#displaybox div.relative:has(> div.clone-settings) > form {
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  border: none !important;
+  border-radius: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/* ===== Bugs #16/#17/#19: Apps ribbon badge clipping ===== */
+div:has(> [class*="CardBackground"]) {
+  position: relative !important;
+  overflow: hidden !important;
+  border-radius: 16px !important;
+}
+
+.installedCardBackground,
+.betaCardBackground,
+.officialCardBackground,
+.warningCardBackground,
+.deprecatedCardBackground,
+.greenCardBackground,
+.limetechCardBackground {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  z-index: 1 !important;
+}
+
+/* ===== Bug #20: ZFS Master tooltipster glass styling ===== */
+.tooltipster-base,
+.tooltipster-box,
+.tooltipster-sidetip .tooltipster-box {
+  background: rgba(255, 255, 255, 0.10) !important;
+  backdrop-filter: blur(40px) !important;
+  -webkit-backdrop-filter: blur(40px) !important;
+  border: 1px solid var(--glass-border) !important;
+  border-radius: 10px !important;
+}
+
+.tooltipster-content,
+.tooltipster-sidetip .tooltipster-content {
+  color: var(--glass-text) !important;
+  font-size: 12px !important;
+  padding: 6px 12px !important;
+}
+
+.tooltipster-arrow-border,
+.tooltipster-arrow-background {
+  border-color: transparent !important;
+}
+
+.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
+  border-top-color: rgba(255, 255, 255, 0.10) !important;
+}
+
+.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
+  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
+}
+
+.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
+  border-left-color: rgba(255, 255, 255, 0.10) !important;
+}
+
+.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
+  border-right-color: rgba(255, 255, 255, 0.10) !important;
+}