Fixed #35001 -- Fixed position of related widget action icons in admi…

…n for some screen sizes.
felixxm · Dec 1, 2023 · dec8aa6 · dec8aa6
1 parent 0f83133
commit dec8aa6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/django/contrib/admin/static/admin/css/responsive.css b/django/contrib/admin/static/admin/css/responsive.css
@@ -670,10 +670,10 @@ input[type="submit"], button {
 
     .selector {
         flex-direction: column;
+        gap: 10px 0;
     }
 
     .selector-available, .selector-chosen {
-        margin-bottom: 0;
         flex: 1 1 auto;
     }
 

diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css
@@ -3,7 +3,7 @@
 .selector {
     display: flex;
     flex-grow: 1;
-    gap: 10px;
+    gap: 0 10px;
 }
 
 .selector select {
@@ -15,7 +15,6 @@
 
 .selector-available, .selector-chosen {
     text-align: center;
-    margin-bottom: 5px;
     display: flex;
     flex-direction: column;
     flex: 1 1;
@@ -88,6 +87,7 @@
     width: 22px;
     background-color: var(--selected-bg);
     border-radius: 10px;
+    margin: 0;
     padding: 0;
     transform: translateY(-17px);
 }
@@ -151,7 +151,7 @@ a.selector-chooseall, a.selector-clearall {
     display: inline-block;
     height: 16px;
     text-align: left;
-    margin: 1px auto 3px;
+    margin: 0 auto;
     overflow: hidden;
     font-weight: bold;
     line-height: 16px;
@@ -580,8 +580,10 @@ ul.timelist, .timelist li {
 /* RELATED WIDGET WRAPPER */
 .related-widget-wrapper {
     display: flex;
-    gap: 10px;
+    gap: 0 10px;
     flex-grow: 1;
+    flex-wrap: wrap;
+    margin-bottom: 5px;
 }
 
 .related-widget-wrapper-link {