Fix .stretched-link buttons, clipped table dropdowns and alert icon docs (#3102)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

.changeset/fix-alert-icons-docs-example.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fixed the missing icon spacing in the "Alerts with icons" example on the alert docs page.

.changeset/fix-stretched-link-btn.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed `.stretched-link` on a `.btn` so the link covers its whole container instead of only the button.

.changeset/fix-table-dropdown-clipping.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Fixed the actions dropdown in the tables and invoices demos being cut off by `.table-responsive`.

core/scss/helpers/_index.scss

@@ -41,6 +41,11 @@
     z-index: 1;
     content: '';
   }
+
+  // .btn is positioned, which would make the button itself the containing block
+  &.btn {
+    position: static;
+  }
 }
 
 //

docs/content/ui/components/alert.mdx

@@ -113,60 +113,43 @@ Add a close button to let the user dismiss the alert. It stays on the page until
 
 An icon in front of the text repeats the type of the alert, which helps when several alerts are on the page.
 
-Use the `alert-icon` class on an `<svg>` (or on an `<i>` when using the webfont) to provide the proper styling.
+Put the icon in an `alert-icon` wrapper as the first child of the alert, and the heading and text in a second element next to it. The alert lays its children out in a row, so no extra flex wrapper is needed.
 
 <Example>
 <div class="alert alert-success" role="alert">
-  <div class="d-flex">
+  <div class="alert-icon">
-    <div>
+    <Icon name="check" class="alert-icon" />
-      <Icon name="check" class="alert-icon" />
+  </div>
-    </div>
+  <div>
-    <div>
+    <h4 class="alert-heading">Wow! Everything worked!</h4>
-      <h4 class="alert-heading">Wow! Everything worked!</h4>
+    <div class="alert-description">Your account has been saved!</div>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
   </div>
 </div>
 <div class="alert alert-info" role="alert">
-  <div class="d-flex">
+  <div class="alert-icon">
-    <div>
+    <Icon name="info-circle" class="alert-icon" />
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  </div>
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <div>
-        <circle cx="12" cy="12" r="9" />
+    <h4 class="alert-heading">Did you know?</h4>
-        <line x1="12" y1="8" x2="12.01" y2="8" />
+    <div class="alert-description">Here is something that you might like to know.</div>
-        <polyline points="11 12 12 12 12 16 13 16" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-heading">Did you know?</h4>
-      <div class="text-secondary">Here is something that you might like to know.</div>
-    </div>
   </div>
 </div>
 <div class="alert alert-warning" role="alert">
-  <div class="d-flex">
+  <div class="alert-icon">
-    <div>
+    <Icon name="alert-triangle" class="alert-icon" />
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  </div>
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <div>
-        <path d="M12 9v2m0 4v.01" />
+    <h4 class="alert-heading">Uh oh, something went wrong</h4>
-        <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
+    <div class="alert-description">Sorry! There was a problem with your request.</div>
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-heading">Uh oh, something went wrong</h4>
-      <div class="text-secondary">Sorry! There was a problem with your request.</div>
-    </div>
   </div>
 </div>
 <div class="alert alert-danger" role="alert">
-  <div class="d-flex">
+  <div class="alert-icon">
-    <div>
+    <Icon name="alert-circle" class="alert-icon" />
-      <Icon name="alert-circle" class="alert-icon" />
+  </div>
-    </div>
+  <div>
-    <div>
+    <h4 class="alert-heading">I'm so sorry&hellip;</h4>
-      <h4 class="alert-heading">I'm so sorry&hellip;</h4>
+    <div class="alert-description">Your account has been deleted and can't be restored.</div>
-      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-    </div>
   </div>
 </div>
 </Example>

shared/components/cards/Invoices.astro

@@ -77,7 +77,7 @@ const countryNames = Object.fromEntries((countries as { code: string; name: stri
 
               <td class="text-end">
                 <div class="dropdown">
-                  <button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">
+                  <button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}'>
                     Actions
                   </button>
                   <DropdownMenu right={true} />

shared/components/demo/Table.astro

@@ -92,7 +92,7 @@ const tableClasses = ['table', 'table-vcenter', mobile && 'table-mobile-md', car
                   <ButtonList class="flex-nowrap">
                     <Button text="Edit" />
                     <div class="dropdown">
-                      <button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown">
+                      <button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}'>
                         Actions
                       </button>
                       <DropdownMenu right={true} />