From d19fc7cd271afd99fb2be859e54872d2bd977a31 Mon Sep 17 00:00:00 2001
From: Scott Kingsley Clark <scott@skc.dev>
Date: Mon, 17 Jun 2024 16:40:08 -0500
Subject: [PATCH] Better support for small screens in Pods Admin > Edit Pod

---
 ui/js/dfv/src/admin/edit-pod/edit-pod.scss    |  5 ++++
 .../edit-pod/main-tabs/field-list-item.scss   | 23 +++++++++++++++++--
 .../admin/edit-pod/main-tabs/field-list.scss  |  8 +++++++
 .../edit-pod/main-tabs/settings-modal.scss    | 15 ++++++++----
 ui/js/dfv/src/components/copy-button.js       |  4 +++-
 ui/js/dfv/src/components/copy-button.scss     |  6 ++++-
 6 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/ui/js/dfv/src/admin/edit-pod/edit-pod.scss b/ui/js/dfv/src/admin/edit-pod/edit-pod.scss
index e4fdc05aba..42851b0f72 100644
--- a/ui/js/dfv/src/admin/edit-pod/edit-pod.scss
+++ b/ui/js/dfv/src/admin/edit-pod/edit-pod.scss
@@ -19,6 +19,11 @@
 	display: block;
 	max-width: 45em;
 	width: 65%;
+
+	@media screen and (max-width: 850px) {
+		max-width: 100%;
+		width: 100%;
+	}
 }
 
 .pods-edit-pod-manage-field .pods-dfv-container-wysiwyg,
diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list-item.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list-item.scss
index 8186d80d1f..e40c9b48ab 100644
--- a/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list-item.scss
+++ b/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list-item.scss
@@ -190,10 +190,25 @@
 	flex: 0 0 calc(25% - 1em);
 	padding-bottom: 1em;
 	padding-right: 1em;
-	overflow-wrap: break-word;
 	width: calc(25% - 1em);
 }
 
+.pods-field_name,
+.pods-field_wrapper-label_name {
+	overflow-wrap: anywhere;
+}
+
+.pods-field_type,
+.pods-field_wrapper-label_type,
+.pods-field_label,
+.pods-field_wrapper-label {
+	overflow-wrap: break-word;
+
+	@media screen and (max-width: 850px) {
+		overflow-wrap: anywhere;
+	}
+}
+
 .pods-field_wrapper-label-items {
 	width: 172px;
 	padding: 1em 1em 1em 0;
@@ -209,7 +224,11 @@
 .pods-field_wrapper-items {
 	border: 1px solid $color--light-grey;
 	margin: 1em 0;
-	// overflow: hidden;
+
+	@media screen and (max-width: 850px) {
+		border-left: none;
+		border-right: none;
+	}
 }
 
 .pods-field_wrapper:nth-child(even) {
diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list.scss
index 211ac07516..37ed0802e8 100644
--- a/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list.scss
+++ b/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list.scss
@@ -9,6 +9,10 @@
 	overflow: visible !important; // TODO: this is being overridden by old 2.x styles
 	display: flex;
 	flex-flow: column nowrap;
+
+	@media screen and (max-width: 850px) {
+		margin: 0;
+	}
 }
 
 .pods-field-list__empty {
@@ -26,4 +30,8 @@
 
 .pods-field-group_add_field_link {
 	align-self: flex-end;
+
+	@media screen and (max-width: 850px) {
+		margin: 0 1em 1em;
+	}
 }
diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/settings-modal.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/settings-modal.scss
index 0fe679d71e..5c912a6d4f 100644
--- a/ui/js/dfv/src/admin/edit-pod/main-tabs/settings-modal.scss
+++ b/ui/js/dfv/src/admin/edit-pod/main-tabs/settings-modal.scss
@@ -1,13 +1,14 @@
 @import '../edit-pod-variables';
 
 .components-modal__frame.pods-settings-modal {
-	height: 90vh;
-	width: 90vw;
+	height: 80vh;
+	width: 80vw;
 	max-width: 950px;
 
-	@media screen and (min-width: 851px) {
-		height: 80vh;
-		width: 80vw;
+	@media screen and (max-width: 850px) {
+		height: 100%;
+		width: 100%;
+		margin-top: 0;
 	}
 }
 
@@ -122,6 +123,10 @@
 		flex: 1 1 auto;
 	}
 
+	@media screen and (max-width: 850px) {
+		overflow-y: scroll;
+	}
+
     .pods-field-option {
         margin-bottom: 1em;
     }
diff --git a/ui/js/dfv/src/components/copy-button.js b/ui/js/dfv/src/components/copy-button.js
index e4629c0c24..374d5d383d 100644
--- a/ui/js/dfv/src/components/copy-button.js
+++ b/ui/js/dfv/src/components/copy-button.js
@@ -26,7 +26,9 @@ const CopyButton = ( { label, textToCopy, onClick } ) => {
 			onClick={ handleClick }
 		>
 			{ copied ? (
-				<span>{ __( 'Copied', 'pods' ) }</span>
+				<span>
+					({ __( 'Copied name', 'pods' ) })
+				</span>
 			) : (
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
diff --git a/ui/js/dfv/src/components/copy-button.scss b/ui/js/dfv/src/components/copy-button.scss
index 8c1b5c079a..f76c6509af 100644
--- a/ui/js/dfv/src/components/copy-button.scss
+++ b/ui/js/dfv/src/components/copy-button.scss
@@ -5,4 +5,8 @@
         width: 12px;
         height: 12px;
     }
-}
\ No newline at end of file
+
+	@media screen and (max-width: 850px) {
+		display: none;
+	}
+}