From 69fffc7de51713f7ba443bb35cac65174560faf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Thu, 10 Sep 2026 00:36:24 +0200
Subject: [PATCH] Build container and table-mobile infixes with
 `breakpoint-infix()` (#3026)

---
 .changeset/consistent-breakpoint-infix.md |  5 +++++
 core/scss/bootstrap/_containers.scss      |  2 +-
 core/scss/ui/_tables.scss                 | 11 +++++++++--
 3 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/consistent-breakpoint-infix.md

diff --git a/.changeset/consistent-breakpoint-infix.md b/.changeset/consistent-breakpoint-infix.md
new file mode 100644
index 000000000..a985efb89
--- /dev/null
+++ b/.changeset/consistent-breakpoint-infix.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated `.container-*` and `.table-mobile-*` to build their breakpoint infix with `breakpoint-infix()`.
diff --git a/core/scss/bootstrap/_containers.scss b/core/scss/bootstrap/_containers.scss
index c6f3bcee1..660cf2c28 100644
--- a/core/scss/bootstrap/_containers.scss
+++ b/core/scss/bootstrap/_containers.scss
@@ -14,7 +14,7 @@
 
   // Responsive containers that are 100% wide until a breakpoint
   @each $breakpoint, $container-max-width in $container-max-widths {
-    .container-#{$breakpoint} {
+    .container#{breakpoint-infix($breakpoint, $grid-breakpoints)} {
       @extend .container-fluid;
     }
 
diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss
index 9e2e7e721..69aa57d5f 100644
--- a/core/scss/ui/_tables.scss
+++ b/core/scss/ui/_tables.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @use '../config' as *;
 
 .table {
@@ -69,9 +71,14 @@
   max-width: 1px;
 }
 
+// Generate a series of `.table-mobile-*` classes for configuring the screen
+// size below which the table stacks into rows. Mirrors `.table-responsive-*`:
+// the infix names the breakpoint the layout applies *below*.
 .table-mobile {
-  @each $breakpoint, $breakpoint-max-widthin in $grid-breakpoints {
-    &#{breakpoint-infix($breakpoint)} {
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
         display: block;