Use `flex-container` for dashboard layout (#30214)

Added new class `flex-container-sidebar` to cover the dashboard sidebar.
Previously this was 37.5% with more padding. Now there is less empty
space between the two columns and this matches other pages like repo or
admin settings page.

Desktop:

<img width="1345" alt="Screenshot 2024-03-31 at 15 11 36"
src="https://github.com/go-gitea/gitea/assets/115237/717389d9-d42c-466e-a8fe-e968f79447fd">

Mobile:
<img width="444" alt="Screenshot 2024-03-31 at 15 11 44"
src="https://github.com/go-gitea/gitea/assets/115237/7faa840b-513a-411b-bf2d-26d52b9b71a0">

---------

Co-authored-by: Giteabot <teabot@gitea.io>

1 files changed, 9 insertions, 1 deletions

diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css
index 1ca513687f..5d4e12cc12 100644
--- a/web_src/css/modules/flexcontainer.css
+++ b/web_src/css/modules/flexcontainer.css
@@ -6,10 +6,16 @@
   margin-top: var(--page-spacing);
 }
 
+/* small options menu on the left, used in settings/admin pages */
 .flex-container-nav {
   width: 240px;
 }
 
+/* wide sidebar on the right, used in frontpage */
+.flex-container-sidebar {
+  width: 35%;
+}
+
 .flex-container-main {
   flex: 1;
   min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
@@ -19,7 +25,9 @@
   .flex-container {
     flex-direction: column;
   }
-  .flex-container-nav {
+  .flex-container-nav,
+  .flex-container-sidebar {
+    order: -1;
     width: auto;
   }
 }