@descope/web-components-ui 3.23.2 → 3.23.3

package/dist/cjs/index.cjs.js

@@ -9716,7 +9716,7 @@ class RawRecoveryCodes extends createBaseClass$1({
     this.attachShadow({ mode: 'open' }).innerHTML = `
       <div class="wrapper">
         <div class="codes-box">
-          <div class="list"></div>
+          <div class="list"><div class="codes-list"></div></div>
           <descope-text class="icon-wrapper">
             <div class="icons">
               <vaadin-icon class="icon copy-icon" icon="vaadin:copy-o" title="Copy"></vaadin-icon>
@@ -9756,6 +9756,17 @@ class RawRecoveryCodes extends createBaseClass$1({
         display: flex;
         flex-grow: 1;
         flex-direction: column;
+        /* text-align maps to align-items here, so it positions the codes block
+           (start/center/end) inside the available space, not each row */
+      }
+      .codes-list {
+        display: flex;
+        flex-direction: column;
+        /* rows always start-aligned so the bullets line up in any font.
+           width:fit-content hugs the codes so .list can position the whole
+           block (keep it, it also defeats the stretch fallback) */
+        align-items: flex-start;
+        width: fit-content;
       }
       descope-text span {
         display: inline-flex;
@@ -10099,7 +10110,7 @@ const RecoveryCodesClass = compose(
   createDynamicDataMixin$1({
     itemRenderer: itemRenderer$5,
     rerenderAttrsList: ['variant', 'mode'],
-    targetSelector: '.list',
+    targetSelector: '.codes-list',
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,