From 6c502734a0395c3c937a827716e3c02697f53f9b Mon Sep 17 00:00:00 2001
From: Tom Carrick <tom@carrick.eu>
Date: Fri, 1 Dec 2023 14:03:04 +0100
Subject: [PATCH] [5.0.x] Fixed #35001 -- Fixed position of related widget
 action icons in admin for some screen sizes.

Backport of dec8aa68f6a2729e57a58c36a21d36daa9a99fed from main
---
 django/contrib/admin/static/admin/css/responsive.css |  2 +-
 django/contrib/admin/static/admin/css/widgets.css    | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/django/contrib/admin/static/admin/css/responsive.css b/django/contrib/admin/static/admin/css/responsive.css
index 7a41223ba5..bb539456d3 100644
--- 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
index f5b769333b..d3d4732cb3 100644
--- 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 {