add 0.5.8

CHANGELOG.md

@@ -11,6 +11,15 @@ Sections:
 
 ---
 
+## [0.5.8] - 2026-01-17
+
+### Changed
+- Mobile UI layout stabilized to prevent horizontal shifting.
+- README rendering no longer expands the page width on mobile devices.
+- Tables and code blocks inside README now scroll within their container.
+- Floating action buttons removed to avoid UI overlap on small screens.
+- Header icon buttons improved for better visibility in light and dark mode.
+
 ## [0.5.7] - 2026-01-17
 
 ### Changed

bcs.yaml

@@ -4,7 +4,7 @@ description: >
   Supports GitHub, GitLab, Gitea and Bahmcloud repositories with
   a central index, UI panel and API, similar to HACS but independent.
 
-category: Store
+category: integration
 
 author: Bahmcloud
 maintainer: Bahmcloud

custom_components/bahmcloud_store/panel/panel.js

@@ -319,8 +319,8 @@ class BahmcloudStorePanel extends HTMLElement {
           display:flex; align-items:center; justify-content:center;
           /* Ensure icon visibility on app header (light & dark modes) */
           color: var(--app-header-text-color, var(--primary-text-color));
-          border: 1px solid rgba(255,255,255,0.25);
-          background: rgba(0,0,0,0.18);
+          border: 1px solid rgba(255,255,255,0.35);
+          background: rgba(255,255,255,0.16);
           cursor:pointer; user-select:none;
         }
         .iconbtn:hover{ filter:brightness(0.98); }
@@ -338,9 +338,12 @@ class BahmcloudStorePanel extends HTMLElement {
 
         .grid{ display:grid; gap:12px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
         @media (min-width: 900px){ .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+        /* Prevent grid children from forcing horizontal overflow (mobile) */
+        .grid > *{ min-width:0; }
 
         .grid2{ display:grid; gap:12px; grid-template-columns: 1fr; }
         @media (min-width: 1024px){ .grid2{ grid-template-columns: 1.2fr .8fr; } }
+        .grid2 > *{ min-width:0; }
 
         .card{
           padding:14px 14px;
@@ -413,7 +416,8 @@ class BahmcloudStorePanel extends HTMLElement {
           line-height: 1.4;
         }
 
-        .md{ overflow-wrap:anywhere; word-break:break-word; }
+        /* Markdown can contain very wide content (tables/images). Keep it within the viewport. */
+        .md{ overflow-wrap:anywhere; word-break:break-word; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
         .md :is(h1,h2,h3){ margin-top: 12px; }
         .md img{ max-width:100%; height:auto; }
         .md code{
@@ -432,7 +436,9 @@ class BahmcloudStorePanel extends HTMLElement {
         .md table{
           width:100%;
           border-collapse: collapse;
-          overflow:auto;
+          overflow-x:auto;
+          overflow-y:hidden;
+          -webkit-overflow-scrolling: touch;
           display:block;
           max-width:100%;
         }
@@ -440,6 +446,9 @@ class BahmcloudStorePanel extends HTMLElement {
           border: 1px solid var(--divider-color);
           padding: 8px;
           text-align:left;
+          max-width:100%;
+          overflow-wrap:anywhere;
+          word-break:break-word;
         }
       </style>
 

custom_components/bahmcloud_store/panel/styles.css

@@ -1,10 +1,15 @@
 body { font-family: system-ui, sans-serif; margin:0; }
 .wrap { padding: 16px; max-width: 1000px; margin: 0 auto; }
 .card { border: 1px solid #ddd; border-radius: 10px; padding: 12px; margin: 10px 0; }
-.row { display:flex; justify-content:space-between; gap: 12px; align-items: flex-start; }
+.row { display:flex; justify-content:space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; min-width:0; }
 .badge { border: 1px solid #bbb; border-radius: 999px; padding: 2px 8px; font-size: 12px; height: fit-content; }
 .muted { color: #666; font-size: 13px; margin-top: 4px; }
 .actions { display:flex; gap: 8px; margin-top: 10px; }
 button { padding: 8px 12px; cursor:pointer; }
 button[disabled] { opacity: 0.6; cursor: not-allowed; }
 a { color: inherit; }
+
+/* Basic markdown safety (in case styles.css is used by older panels) */
+.md { max-width: 100%; overflow-x: auto; }
+.md table { display:block; max-width:100%; overflow-x:auto; }
+.md img { max-width: 100%; height: auto; }