#459 - Fix category buttons overflow

maraf · Aug 5, 2024 · 9544868 · 9544868
1 parent 773270f
commit 9544868
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/src/Money.Blazor.Host/Components/ExpenseCreate.razor b/src/Money.Blazor.Host/Components/ExpenseCreate.razor
@@ -1,4 +1,4 @@
-@inherits ModalDialog
+@inherits ModalDialog
 
 @code
 {
@@ -121,8 +121,8 @@
                         {
                             var buttonId = $"expense-wiz-category-{category.Key.AsGuidKey().Guid.ToString()}";
 
-                            <div class="col-6 col-md-4 d-grid">
-                                <button type="submit" id="@buttonId" class="btn btn-selectable h-100 @(category.Key.Equals(CategoryKey) ? "btn-selectable-selected" : "") @category.Color.SelectAccent("back-dark", "back-light")" style="background-color: @category.Color.ToHashCode();" @onclick="@(() => CategoryKey = category.Key)">
+                            <div class="col-6 col-md-4">
+                                <button type="submit" id="@buttonId" class="btn btn-selectable w-100 h-100 @(category.Key.Equals(CategoryKey) ? "btn-selectable-selected" : "") @category.Color.SelectAccent("back-dark", "back-light")" style="background-color: @category.Color.ToHashCode();" @onclick="@(() => CategoryKey = category.Key)">
                                     <div>
                                         <h2>@category.Icon</h2>
                                     </div>

diff --git a/src/Money.Blazor.Host/Components/ExpenseTemplateCategory.razor b/src/Money.Blazor.Host/Components/ExpenseTemplateCategory.razor
@@ -9,8 +9,8 @@
                 var isFistCategory = true;
 
                 <div class="row g-2">
-                    <div class="col-6 col-md-4 d-grid">
-                        <button type="button" class="btn btn-selectable h-100 bg-white @(EmptyCategoryKey.Equals(CategoryKey) ? "btn-selectable-selected" : "")" @onclick="@(() => CategoryKey = EmptyCategoryKey)">
+                    <div class="col-6 col-md-4">
+                        <button type="button" class="btn btn-selectable w-100 h-100 bg-white @(EmptyCategoryKey.Equals(CategoryKey) ? "btn-selectable-selected" : "")" @onclick="@(() => CategoryKey = EmptyCategoryKey)">
                             <div>
                                 <h2></h2>
                             </div>
@@ -28,8 +28,8 @@
                         var buttonId = isFistCategory ? "expense-template-category-first" : null;
                         isFistCategory = false;
 
-                        <div class="col-6 col-md-4 d-grid">
-                            <button type="button" id="@buttonId" class="btn btn-selectable h-100 @(category.Key.Equals(CategoryKey) ? "btn-selectable-selected" : "") @category.Color.SelectAccent("back-dark", "back-light")" style="background-color: @category.Color.ToHashCode();" @onclick="@(() => CategoryKey = category.Key)">
+                        <div class="col-6 col-md-4">
+                            <button type="button" id="@buttonId" class="btn btn-selectable w-100 h-100 @(category.Key.Equals(CategoryKey) ? "btn-selectable-selected" : "") @category.Color.SelectAccent("back-dark", "back-light")" style="background-color: @category.Color.ToHashCode();" @onclick="@(() => CategoryKey = category.Key)">
                                 <div>
                                     <h2>@category.Icon</h2>
                                 </div>

diff --git a/src/Money.Blazor.Host/Components/ExpenseTemplateCreate.razor b/src/Money.Blazor.Host/Components/ExpenseTemplateCreate.razor
@@ -18,8 +18,8 @@
                 <div class="row g-2">
                     @foreach (var category in Categories)
                     {
-                        <div class="col-6 col-md-4 d-grid">
-                            <button type="button" class="btn btn-selectable h-100 @(category.Key.Equals(CategoryKey) ? "btn-selectable-selected" : "") @category.Color.SelectAccent("back-dark", "back-light")" style="background-color: @category.Color.ToHashCode();" @onclick="@(() => CategoryKey = category.Key)">
+                        <div class="col-6 col-md-4">
+                            <button type="button" class="btn btn-selectable w-100 h-100 @(category.Key.Equals(CategoryKey) ? "btn-selectable-selected" : "") @category.Color.SelectAccent("back-dark", "back-light")" style="background-color: @category.Color.ToHashCode();" @onclick="@(() => CategoryKey = category.Key)">
                                 <div>
                                     <h2>@category.Icon</h2>
                                 </div>

diff --git a/src/Money.Blazor.Host/Components/OutcomeCreate.razor b/src/Money.Blazor.Host/Components/OutcomeCreate.razor
@@ -79,8 +79,8 @@
                         var buttonId = isFistCategory ? IdPrefix + "expense-category-first" : null;
                         isFistCategory = false;
 
-                        <div class="col-6 col-md-4 d-grid">
-                            <button type="button" id="@buttonId" class="btn btn-selectable h-100 @(category.Key.Equals(CategoryKey) ? "btn-selectable-selected" : "") @category.Color.SelectAccent("back-dark", "back-light")" style="background-color: @category.Color.ToHashCode();" @onclick="@(() => CategoryKey = category.Key)">
+                        <div class="col-6 col-md-4">
+                            <button type="button" id="@buttonId" class="btn btn-selectable w-100 h-100 @(category.Key.Equals(CategoryKey) ? "btn-selectable-selected" : "") @category.Color.SelectAccent("back-dark", "back-light")" style="background-color: @category.Color.ToHashCode();" @onclick="@(() => CategoryKey = category.Key)">
                                 <div>
                                     <h2>@category.Icon</h2>
                                 </div>

diff --git a/src/Money.Blazor.Host/Pages/Trends.razor b/src/Money.Blazor.Host/Pages/Trends.razor
@@ -12,8 +12,8 @@ else
     <div class="row g-2">
         @foreach (var category in Categories)
         {
-            <div class="col-4 col-md-2 d-grid">
-                <a href="@Navigator.UrlTrends(category.Key)" class="btn h-100 @category.Color.SelectAccent("back-dark", "back-light")" style="background-color: @category.Color.ToHashCode();">
+            <div class="col-4 col-md-2">
+                <a href="@Navigator.UrlTrends(category.Key)" class="btn w-100 h-100 @category.Color.SelectAccent("back-dark", "back-light")" style="background-color: @category.Color.ToHashCode();">
                     <div>
                         <h2>@category.Icon</h2>
                     </div>