From 2282441869e7b821dce4684f377ee1822eedac22 Mon Sep 17 00:00:00 2001
From: Salih <salihozkara00@gmail.com>
Date: Thu, 25 Jan 2024 15:42:50 +0300
Subject: [PATCH] Fix: Selects on docs shrinks to unusable sizes on mobile

---
 .../Pages/Documents/Project/Index.cshtml      | 55 ++++++++++++-------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 85d402c11d..d285ae5338 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -332,28 +332,45 @@
                                     </abp-column>
                                 </abp-row>
                                 <abp-row class="gx-2">
-                                    @foreach (var parameter in Model.DocumentPreferences.Parameters)
-                                    {
-                                        <div class="col">
-                                            <div class="custom-input-group">
-                                                <span class="input-group-text" id="@("Section" + parameter.Name + "ComboboxAddonId")">@(parameter.DisplayName)</span>
-                                                <select class="doc-section-combobox form-select"
-                                                        aria-describedby="@("Section" + parameter.Name + "ComboboxAddonId")"
-                                                        id="@("Section" + parameter.Name + "ComboboxId")" data-key="@parameter.Name">
-                                                    @foreach (var value in parameter.Values.OrderBy(p => p.Value))
-                                                    {
-                                                        @if (value.Key == (Model.UserPreferences.ContainsKey(parameter.Name) ? Model.UserPreferences[parameter.Name] : null))
-                                                        {
-                                                            <option value="@value.Key" selected="selected">@value.Value</option>
-                                                        }
-                                                        else
+                                    @{
+                                        const int maxCellCount = 3;
+                                        var count = Model.DocumentPreferences.Parameters.Count;
+                                        var rowCount = count / maxCellCount + (count % maxCellCount > 0 ? 1 : 0);
+                                        var cellSize = 12 / (count > maxCellCount ? maxCellCount : count);
+                                        
+                                        string BuildParameterDivClass(int index)
+                                        {
+                                            var row = index / maxCellCount;
+                                            var isLastRow = row == rowCount - 1;
+                                            var currentCellSize = isLastRow ? 12 / (count % maxCellCount) : cellSize;
+                                            return $"col-12 col-lg-{currentCellSize} mb-lg-{(isLastRow ? "0" : "2")} {(index == count - 1 ? "" : "mb-2")}";
+                                        }
+                                        
+                                        for (var i = 0; i < count; ++i)
+                                        {
+                                            var parameter = Model.DocumentPreferences.Parameters[i];
+
+                                            <div class="@BuildParameterDivClass(i)">
+                                                <div class="custom-input-group">
+                                                    <span class="input-group-text" id="@("Section" + parameter.Name + "ComboboxAddonId")">@(parameter.DisplayName)</span>
+                                                    <select class="doc-section-combobox form-select"
+                                                            aria-describedby="@("Section" + parameter.Name + "ComboboxAddonId")"
+                                                            id="@("Section" + parameter.Name + "ComboboxId")" data-key="@parameter.Name">
+                                                        @foreach (var value in parameter.Values.OrderBy(p => p.Value))
                                                         {
-                                                            <option value="@value.Key">@value.Value</option>
+                                                            @if (value.Key == (Model.UserPreferences.ContainsKey(parameter.Name) ? Model.UserPreferences[parameter.Name] : null))
+                                                            {
+                                                                <option value="@value.Key" selected="selected">@value.Value</option>
+                                                            }
+                                                            else
+                                                            {
+                                                                <option value="@value.Key">@value.Value</option>
+                                                            }
                                                         }
-                                                    }
-                                                </select>
+                                                    </select>
+                                                </div>
                                             </div>
-                                        </div>
+                                        }
                                     }
                                 </abp-row>
                             </div>