From 5eb043dfadb502622aeb9f9b5f46aac053c48a08 Mon Sep 17 00:00:00 2001
From: Annie Pauline <anniepauline.23@gmail.com>
Date: Fri, 1 Dec 2023 08:23:22 +0530
Subject: [PATCH] Admin horizontal scroll on narrower screens (#3406)

* admin horizontal scoll

* fixed lint errors

* Update web/public/styles/admin/config-public-details.css

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
---
 .../styles/admin/config-public-details.css    |  9 ++++--
 .../styles/admin/config-public-details.css    | 29 +++++++++++++++++--
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/static/web/styles/admin/config-public-details.css b/static/web/styles/admin/config-public-details.css
index 3283a2ded..759b0546f 100644
--- a/static/web/styles/admin/config-public-details.css
+++ b/static/web/styles/admin/config-public-details.css
@@ -6,7 +6,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1400px) {
   .config-public-details-page .top-container {
     flex-wrap: wrap;
   }
@@ -26,7 +26,7 @@
     max-width: none;
   }
 }
-@media (max-width: 1200px) and (max-width: 980px) {
+@media (max-width: 1400px) {
   .config-public-details-page .top-container .social-items-container {
     flex-direction: column;
   }
@@ -77,3 +77,8 @@
   display: inline-block;
   border: 1px solid var(--theme-color-palette-5);
 }
+@media (min-width: 1400px) {
+  .instance-details-container {
+    width: 65% !important;
+  }
+}
\ No newline at end of file
diff --git a/web/public/styles/admin/config-public-details.css b/web/public/styles/admin/config-public-details.css
index 3283a2ded..c95e0cf51 100644
--- a/web/public/styles/admin/config-public-details.css
+++ b/web/public/styles/admin/config-public-details.css
@@ -1,15 +1,19 @@
 .config-public-details-page {
   width: 100%;
 }
+
 .config-public-details-page .top-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
 }
-@media (max-width: 1200px) {
+
+/* add and your next to each other for < 1200 */
+@media (max-width: 1400px) {
   .config-public-details-page .top-container {
     flex-wrap: wrap;
   }
+
   .config-public-details-page .top-container .social-items-container {
     display: flex;
     flex-direction: row;
@@ -19,55 +23,70 @@
     width: 100%;
     max-width: none;
   }
+
   .config-public-details-page .top-container .social-items-container .tags-module {
     margin-right: 1em;
   }
+
   .config-public-details-page .top-container .social-items-container .form-module {
     max-width: none;
   }
 }
-@media (max-width: 1200px) and (max-width: 980px) {
+
+/* everything comes into a single column*/
+@media (max-width: 1400px) {
   .config-public-details-page .top-container .social-items-container {
     flex-direction: column;
   }
+
   .config-public-details-page .top-container .social-items-container .form-module {
     width: 100%;
   }
+
   .config-public-details-page .top-container .social-items-container .tags-module {
     margin-bottom: 0;
   }
 }
+
 .config-public-details-page .instance-details-container {
   width: 100%;
   border-right: 1px solid #cbd0d8;
 }
+
 .config-public-details-page .social-items-container {
   padding: 0 0.75em;
   margin-left: 1em;
   max-width: 450px;
 }
+
 .config-public-details-page .social-items-container .social-handles-container {
   min-width: 350px;
 }
+
 .config-public-details-page .instance-details-container,
 .config-public-details-page .page-content-module {
   margin: 1em 0;
 }
+
 .config-public-details-page .field-summary textarea {
   height: 6em !important;
 }
+
 .config-public-details-page .edit-custom-css #field-customStyles {
   height: 15em;
   width: 100%;
   font-family: monospace;
   resize: auto;
 }
+
 .other-field-container {
   margin: 0.5em 0;
 }
+
 .logo-upload-container .input-group {
   align-items: center;
 }
+
 .logo-upload-container img.logo-preview {
   min-height: 120px;
   min-width: 120px;
@@ -77,3 +96,9 @@
   display: inline-block;
   border: 1px solid var(--theme-color-palette-5);
 }
+
+@media (min-width: 1400px) {
+  .instance-details-container {
+    width: 65% !important;
+  }
+}
\ No newline at end of file