From 29bf75051f31cafdbfa8203071e7c7f451d8e4b8 Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller-moko@noreply.git.mokoconsulting.tech>
Date: Tue, 23 Jun 2026 08:04:27 -0500
Subject: [PATCH] style(dashboard): use Bootstrap grid columns for extension
 version bar

Dynamically calculates col-N from extension count (12/count) so items
spread evenly across the full width as horizontal cells, not stacked.
Removed custom flex CSS in favour of Bootstrap row/g-0.
---
 .../admin/tmpl/dashboard/default.php          |  6 +++--
 .../media/css/dashboard.css                   | 24 -------------------
 2 files changed, 4 insertions(+), 26 deletions(-)

diff --git a/source/packages/com_mokosuiteclient/admin/tmpl/dashboard/default.php b/source/packages/com_mokosuiteclient/admin/tmpl/dashboard/default.php
index 52b41aae..fb35c5c6 100644
--- a/source/packages/com_mokosuiteclient/admin/tmpl/dashboard/default.php
+++ b/source/packages/com_mokosuiteclient/admin/tmpl/dashboard/default.php
@@ -85,7 +85,7 @@ $categoryOrder = ['core', 'security', 'monitoring', 'content', 'tools', 'api'];
 
 	<?php if (!empty($mokoExts)): ?>
 	<!-- Moko Component & Module Versions -->
-	<div class="mokosuiteclient-ext-bar card mb-4">
+	<div class="row g-0 mb-4 border rounded overflow-hidden">
 		<?php
 		$extIcons = [
 			'com_mokosuiteclient'           => 'icon-cogs',
@@ -94,12 +94,14 @@ $categoryOrder = ['core', 'security', 'monitoring', 'content', 'tools', 'api'];
 			'mod_mokosuiteclient_cache'     => 'icon-bolt',
 			'mod_mokosuiteclient_categories' => 'icon-folder',
 		];
+		$extCount = count($mokoExts);
+		$colClass = $extCount > 0 ? 'col-' . max(1, (int) floor(12 / $extCount)) : 'col';
 		foreach ($mokoExts as $ext):
 			$icon = $extIcons[$ext->element] ?? 'icon-puzzle-piece';
 			$label = str_replace(['mod_mokosuiteclient_', 'com_mokosuiteclient'], ['', 'Component'], $ext->element);
 			$label = ucfirst($label ?: 'Component');
 		?>
-		<div class="mokosuiteclient-ext-item">
+		<div class="<?php echo $colClass; ?> d-flex align-items-center justify-content-center gap-2 py-2 bg-white border-end" style="font-size:0.82rem;">
 			<span class="<?php echo $icon; ?>" aria-hidden="true" style="color:#1a2744;"></span>
 			<span><?php echo $this->escape($label); ?></span>
 			<span class="badge bg-light text-dark"><?php echo $this->escape($ext->version); ?></span>
diff --git a/source/packages/com_mokosuiteclient/media/css/dashboard.css b/source/packages/com_mokosuiteclient/media/css/dashboard.css
index ad12a5bd..eb268b8c 100644
--- a/source/packages/com_mokosuiteclient/media/css/dashboard.css
+++ b/source/packages/com_mokosuiteclient/media/css/dashboard.css
@@ -39,30 +39,6 @@
 	padding: 0.3em 0.6em;
 }
 
-/* Moko extensions version bar — full-width auto-sized */
-.mokosuiteclient-ext-bar {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0;
-	width: 100%;
-}
-
-.mokosuiteclient-ext-bar .mokosuiteclient-ext-item {
-	flex: 1 1 0;
-	min-width: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 0.4rem;
-	padding: 0.5rem 0.75rem;
-	font-size: 0.82rem;
-	border-right: 1px solid #dee2e6;
-	white-space: nowrap;
-}
-
-.mokosuiteclient-ext-bar .mokosuiteclient-ext-item:last-child {
-	border-right: none;
-}
 
 /* Plugin cards */
 .mokosuiteclient-plugin-card {