Wrap toolbar buttons and update toolbar CSS

Author: pwelter34

src/LoreSoft.Blazor.Controls/Data/DataGridToolbar.razor

@@ -30,53 +30,55 @@
         {
             @FilterTemplate(CurrentGrid)
         }
-        @if (ShowRefresh)
-        {
-            <button name="refresh-button"
-                    title="Refresh Data"
-                    class="toolbar-button"
-                    type="button"
-                    @onclick="HandelRefresh">
-                <i class="toolbar-icon toolbar-refresh-icon"></i>
-            </button>
-        }
-        @if (ShowExport)
-        {
-            <button name="export-button"
-                    title="Export Data"
-                    class="toolbar-button"
-                    type="button"
-                    @onclick="HandelExport">
-                <i class="toolbar-icon toolbar-export-icon"></i>
-            </button>
-        }
-        @if (ShowFilter)
-        {
-            <button name="filter-button"
-                    title="Filter Data"
-                    class="toolbar-button"
-                    type="button"
-                    @onclick="ToggleFilter">
-                @if (CurrentGrid.IsFilterActive())
-                {
-                    <i class="toolbar-icon toolbar-filter-active-icon"></i>
-                }
-                else
-                {
-                    <i class="toolbar-icon toolbar-filter-icon"></i>
-                }
-            </button>
-        }
-        @if (ShowColumnPicker)
-        {
-            <button name="column-picker-button"
-                    title="Column Picker"
-                    class="toolbar-button"
-                    type="button"
-                    @onclick="ToggleColumnPicker">
-                <i class="toolbar-icon toolbar-column-picker-icon"></i>
-            </button>
-        }
+        <div class="toolbar-button-bar">
+            @if (ShowRefresh)
+            {
+                <button name="refresh-button"
+                        title="Refresh Data"
+                        class="toolbar-button"
+                        type="button"
+                        @onclick="HandelRefresh">
+                    <i class="toolbar-icon toolbar-refresh-icon"></i>
+                </button>
+            }
+            @if (ShowExport)
+            {
+                <button name="export-button"
+                        title="Export Data"
+                        class="toolbar-button"
+                        type="button"
+                        @onclick="HandelExport">
+                    <i class="toolbar-icon toolbar-export-icon"></i>
+                </button>
+            }
+            @if (ShowFilter)
+            {
+                <button name="filter-button"
+                        title="Filter Data"
+                        class="toolbar-button"
+                        type="button"
+                        @onclick="ToggleFilter">
+                    @if (CurrentGrid.IsFilterActive())
+                    {
+                        <i class="toolbar-icon toolbar-filter-active-icon"></i>
+                    }
+                    else
+                    {
+                        <i class="toolbar-icon toolbar-filter-icon"></i>
+                    }
+                </button>
+            }
+            @if (ShowColumnPicker)
+            {
+                <button name="column-picker-button"
+                        title="Column Picker"
+                        class="toolbar-button"
+                        type="button"
+                        @onclick="ToggleColumnPicker">
+                    <i class="toolbar-icon toolbar-column-picker-icon"></i>
+                </button>
+            }
+        </div>
         @if (ActionTemplate != null)
         {
             @ActionTemplate(CurrentGrid)

src/LoreSoft.Blazor.Controls/wwwroot/css/data-toolbar.css

@@ -17,23 +17,18 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  justify-content: end;
-  gap: .25rem .125rem;
+  gap: .325rem .125rem;
 }
 
 .data-toolbar .toolbar-title {
   margin-left: var(--dt-title-margin);
   margin-right: auto;
-  min-width: 0;
   flex: 1;
-  overflow: hidden;
 }
 
 .data-toolbar .toolbar-title .toolbar-title-text {
   margin: 0;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .data-toolbar select,
@@ -128,6 +123,9 @@
 /* Mobile responsive styles */
 @media (max-width: 768px) {
   .data-toolbar .toolbar-search-box {
-    display: none;
+    width: 100%;
+  }
+  .data-toolbar .toolbar-control {
+    width: 100%;
   }
 }