From 12329c16de0b552b173a514944b1b3f5051c2b56 Mon Sep 17 00:00:00 2001
From: "NGOCDG280\\ngocdg" <pnd280@gmail.com>
Date: Sat, 23 Nov 2024 07:58:43 +0700
Subject: [PATCH] fix(css): follow-up query box styling

---
 docs/changelog.md        |  8 +++++
 package.json             |  2 +-
 src/assets/overrides.css | 69 ++++++++++++++--------------------------
 3 files changed, 33 insertions(+), 46 deletions(-)

diff --git a/docs/changelog.md b/docs/changelog.md
index f84443dd..9cc6bd88 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -10,6 +10,14 @@ Consider giving a star ⭐ on [Github](https://github.com/pnd280/complexity).
 
 **EXPERIMENTAL** features are subjected to change/removal without prior notice.
 
+---
+
+## v0.0.5.16
+
+_Release date: 23rd Nov, 2024_
+
+-   **FIX**: Fixed messed up follow-up query box styling.
+
 ## v0.0.5.12
 
 _Release date: 19th Nov, 2024_
diff --git a/package.json b/package.json
index fabf869e..cc19f6ed 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "complexity",
   "displayName": "Complexity - Perplexity AI Supercharged",
-  "version": "0.0.5.15",
+  "version": "0.0.5.16",
   "author": "pnd280",
   "description": "⚡ Supercharge your Perplexity AI",
   "type": "module",
diff --git a/src/assets/overrides.css b/src/assets/overrides.css
index 0343c235..0039eec3 100644
--- a/src/assets/overrides.css
+++ b/src/assets/overrides.css
@@ -241,38 +241,41 @@ html {
 
   /* Adjust query box position */
   .grow.block {
-    border       : 1px solid var(--border-darker) !important;
+    border: 1px solid var(--border-darker) !important;
     border-radius: calc(var(--radius) - 2px) !important;
-    background   : var(--secondary);
-    box-shadow   : 0 0 10px 0 rgba(0, 0, 0, 0.2) !important;
+    background: var(--secondary);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2) !important;
   }
 
-  .grow.block>div>div {
-    border-radius        : calc(var(--radius) - 2px) !important;
-    display              : grid;
-    grid-template-rows   : 1fr auto;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  .grow.block > div {
+    border-radius: 0.375rem;
   }
 
-  .grow.block>div>div>div:first-child {
+  .grow.block > div > div {
+    border-radius: 0.375rem;
+  }
+
+  .grow.block > div > div > div {
+    display: grid !important;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+    grid-template-rows: 1fr auto !important;
+  }
+
+  .grow.block > div > div > div > div:nth-child(1) {
+    order: 0;
+    grid-column: span 3 / span 3;
     grid-column-start: 1;
-    grid-column-end  : 4;
-    padding-bottom   : 0.5rem;
-    order            : unset;
-    border-radius    : unset;
   }
 
-  .grow.block>div>div>div:nth-child(2) {
+  .grow.block > div > div > div > div:nth-child(2) {
+    grid-column: span 2 / span 2;
     grid-column-start: 1;
-    grid-column-end  : 3;
-    grid-row-start   : 2;
-    order            : unset;
+    align-items: center;
+    order: 1;
   }
 
-  .grow.block>div>div>div:last-child {
-    grid-column-start: 3;
-    grid-row-start   : 2;
-    order            : unset;
+  .grow.block > div > div > div > div:nth-child(3) {
+    grid-column: span 1 / span 1;
   }
 
   .pointer-events-none.fixed.bottom-mobileNavHeight>.pointer-events-auto.md\:col-span-8:has(textarea) {
@@ -280,30 +283,6 @@ html {
     z-index    : 20 !important;
   }
 
-  /* .pointer-events-none.fixed.bottom-mobileNavHeight {
-    margin-top: 5rem;
-
-    transition         : all;
-    transition-duration: 0.3s;
-
-    position: sticky !important;
-    bottom  : 4rem !important;
-  } */
-
-  /* Normal thread */
-  .mx-auto.h-full.w-full.max-w-threadWidth {
-    padding-bottom: 0 !important;
-  }
-
-  .mx-auto.h-full.w-full.max-w-threadWidth.px-md>div>div:first-child>div:first-child {
-    min-height: 100vh;
-  }
-
-  /* Branched thread */
-  .mx-auto.h-full.w-full.max-w-threadWidth.px-md>div>div>div:nth-child(2):not([class]) {
-    min-height: 100vh;
-  }
-
 
   @media (min-width: 768px) {
     .pointer-events-none.fixed.bottom-mobileNavHeight {