From 3ab8e747ea5341e8b0ac1d86ab158ff18607f838 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 26 Jun 2023 00:15:38 +0200
Subject: [PATCH] Fix migrate page layout on mobile

---
 templates/repo/migrate/migrate.tmpl |  4 ++--
 web_src/css/repo.css                | 25 ++++++++++++++++++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/templates/repo/migrate/migrate.tmpl b/templates/repo/migrate/migrate.tmpl
index 01245322f8656..0e15da84255ba 100644
--- a/templates/repo/migrate/migrate.tmpl
+++ b/templates/repo/migrate/migrate.tmpl
@@ -3,9 +3,9 @@
 	<div class="ui middle very relaxed page grid">
 		<div class="column">
 			{{template "repo/migrate/helper" .}}
-			<div class="ui three stackable cards">
+			<div class="ui cards migrate-entries">
 				{{range .Services}}
-					<a class="ui card gt-df gt-ac" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
+					<a class="ui card migrate-entry gt-df gt-ac" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
 						{{if eq .Name "github"}}
 							{{svg "octicon-mark-github" 184 "gt-p-4"}}
 						{{else if eq .Name "gitlab"}}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 79a4206c19940..825711465ecaf 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -3100,18 +3100,37 @@ tbody.commit-list {
   }
 }
 
-.repository.migrate .card {
+.migrate-entries {
+  display: grid !important;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 25px;
+  margin: 0 !important;
+}
+
+@media (max-width: 767.98px) {
+  .migrate-entries {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.migrate-entry {
   transition: all 0.1s ease-in-out;
   box-shadow: none !important;
   border: 1px solid var(--color-secondary);
-  color: var(--color-text);
+  color: var(--color-text) !important;
+  width: auto !important;
+  margin: 0 !important;
 }
 
-.repository.migrate .card:hover {
+.migrate-entry:hover {
   transform: scale(105%);
   box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
 }
 
+.migrate-entry .description {
+  text-wrap: balance;
+}
+
 @media (max-width: 767.98px) {
   .repository.file.list #repo-files-table .entry,
   .repository.file.list #repo-files-table .commit-list {