@oksigenia/access-panel 0.7.0 → 0.7.1

package/dist/web-component.js

@@ -902,6 +902,7 @@ var PANEL_CSS = `
 }
 .oks-access-panel.is-open { opacity: 1; pointer-events: all; }
 .oks-access-header {
+  flex: 0 0 auto;
   padding: 15px 20px;
   border-bottom: 1px solid #eee;
   display: flex;
@@ -925,7 +926,11 @@ var PANEL_CSS = `
 }
 .oks-access-close:hover { background: #e0e0e0; border-color: #ccc; }
 .oks-access-close svg { width: 24px; height: 24px; stroke-width: 2.5px; }
-.oks-access-content { padding: 0 20px 20px; overflow-y: auto; }
+/* flex:1 1 auto + min-height:0 lets the content scroll inside the 90vh panel.
+   Without min-height:0 a flex child won't shrink below its content, so the
+   header (\xD7) and footer (Reset) get pushed off-screen on short viewports or at
+   high zoom \u2014 the panel becomes impossible to close. */
+.oks-access-content { flex: 1 1 auto; min-height: 0; padding: 0 20px 20px; overflow-y: auto; }
 .oks-access-title {
   margin: 10px 0 5px;
   font-size: 11px;
@@ -1026,6 +1031,7 @@ var PANEL_CSS = `
 .oks-access-opt[data-level="4"] .oks-levels span:nth-child(-n+4) { background: #000; }
 .oks-access-opt:hover .oks-levels span { background: #555; }
 .oks-access-footer {
+  flex: 0 0 auto;
   padding: 12px 20px;
   border-top: 1px solid #eee;
   text-align: center;
@@ -1232,12 +1238,14 @@ body.oks-a11y-bigtargets summary:not(oksigenia-access-panel):not(oksigenia-acces
 }
 `;
 function scopedEffectCss(s) {
-  return `
+  const isRoot = s === "body" || s === "html" || s === ":root";
+  const zoom = isRoot ? "" : `
 ${s}.oks-zoom-1 { font-size: 110% !important; }
 ${s}.oks-zoom-2 { font-size: 120% !important; }
 ${s}.oks-zoom-3 { font-size: 135% !important; }
 ${s}.oks-zoom-4 { font-size: 150% !important; }
-
+`;
+  return `${zoom}
 ${s}.oks-lh-1 * { line-height: 1.6 !important; }
 ${s}.oks-lh-2 * { line-height: 1.9 !important; }
 ${s}.oks-lh-3 * { line-height: 2.2 !important; }