From 6ec9583b1122600180ddf0aaa4e8d5c105aeb326 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 25 Jan 2024 14:28:56 +0100
Subject: [PATCH] style(subplebbit settings): add responsive design

---
 .../subplebbit-settings.module.css            | 30 +++++++++++++++----
 .../subplebbit-settings.tsx                   |  2 +-
 src/views/subplebbits/subplebbits.module.css  |  2 +-
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css
index 9ed497ee..720993b0 100644
--- a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css
+++ b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css
@@ -37,6 +37,7 @@
 .boxInput input {
   font-size: 100%;
   width: 492px;
+  box-sizing: border-box;
   padding: 3px;
   border: 1px solid var(--border-text);
   box-shadow: var(--box-shadow-input);
@@ -45,6 +46,7 @@
 .boxInput textarea {
   box-shadow: var(--box-shadow-input);
   width: 492px;
+  box-sizing: border-box;
   padding: 3px;
   border: 1px solid gray;
   height: 100px;
@@ -214,18 +216,36 @@
   padding-left: 10px;
 }
 
+@media (min-width: 768px) {
+  .content {
+    padding: 7px 5px 0px 5px;
+  }
+}
+
+@media (max-width: 853px) {
+  .box, .boxInput {
+    width: calc(100% - 315px);
+  }
+
+  .boxInput input, .boxInput textarea {
+    width: calc(100% + 293px);
+  }
+}
+
 @media (max-width: 768px) {
   .content {
-    padding: 7px 0px 0px 0px;
+    padding: 7px 0px 0px 5px;
   }
 
   .sidebar {
     display: none;
   }
-}
 
-@media (min-width: 768px) {
-  .content {
-    padding: 7px 5px 0px 5px;
+  .box, .boxInput {
+    width: 95vw;
+  }
+
+  .boxInput input, .boxInput textarea {
+    width: calc(100% - 20px)
   }
 }
\ No newline at end of file
diff --git a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx
index 2081cf25..1bc3a3fa 100644
--- a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx
+++ b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx
@@ -609,7 +609,7 @@ const SubplebbitSettings = () => {
       <div className={styles.sidebar}>
         <Sidebar address={subplebbitAddress} createdAt={createdAt} description={description} roles={roles} rules={rules} title={title} updatedAt={updatedAt} />
       </div>
-      {!settings && <div className={styles.infobar}>can't connect to community node - only the owner of a community can edit its settings.</div>}
+      {!settings && <div className={styles.infobar}>can't connect to community p2p node - only the owner of a community can edit its settings.</div>}
       <Title />
       <Description />
       <Address />
diff --git a/src/views/subplebbits/subplebbits.module.css b/src/views/subplebbits/subplebbits.module.css
index 7568887b..09f86580 100644
--- a/src/views/subplebbits/subplebbits.module.css
+++ b/src/views/subplebbits/subplebbits.module.css
@@ -222,7 +222,7 @@
     padding: 7px 5px 0px 5px;
   }
 
-  .stateString, .infobar {
+  .infobar {
     max-width: calc(100% - 327px);
   }
 }