diff --git a/custom_components/bahmcloud_store/panel/panel.js b/custom_components/bahmcloud_store/panel/panel.js index 43ebe0e..2100a1a 100644 --- a/custom_components/bahmcloud_store/panel/panel.js +++ b/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; }