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>

templates/user/dashboard/dashboard.tmpl

@@ -1,15 +1,13 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content dashboard feeds">
 	{{template "user/dashboard/navbar" .}}
-	<div class="ui container">
+	<div class="ui container flex-container">
 		{{template "base/alert" .}}
-		<div class="ui mobile reversed stackable grid">
-			<div class="ui container ten wide column">
-				{{template "user/heatmap" .}}
-				{{template "user/dashboard/feeds" .}}
-			</div>
-			{{template "user/dashboard/repolist" .}}
+		<div class="flex-container-main">
+			{{template "user/heatmap" .}}
+			{{template "user/dashboard/feeds" .}}
 		</div>
+		{{template "user/dashboard/repolist" .}}
 	</div>
 </div>
 {{template "base/footer" .}}

templates/user/dashboard/repolist.tmpl

@@ -56,4 +56,4 @@ data.organizationId = {{.ContextUser.ID}};
 window.config.pageData.dashboardRepoList = data;
 </script>
 
-<div id="dashboard-repo-list" class="six wide column"></div>
+<div id="dashboard-repo-list" class="flex-container-sidebar"></div>