From e2d917c5f040c683868a0de26b114917a4af260e Mon Sep 17 00:00:00 2001
From: Yazan Agha-Schrader <mountaiin@icloud.com>
Date: Tue, 28 May 2024 00:29:08 +0200
Subject: [PATCH] fix grammar field width

---
 examples/server/themes/mount-ai/index.html |  6 ++++--
 examples/server/themes/mount-ai/style.css  | 10 +++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/examples/server/themes/mount-ai/index.html b/examples/server/themes/mount-ai/index.html
index d4bd2da4e..3a73f04d4 100644
--- a/examples/server/themes/mount-ai/index.html
+++ b/examples/server/themes/mount-ai/index.html
@@ -615,8 +615,10 @@ const BoolField = ({ label, title, name, value }) => {
       const GrammarControl = () => (
         html`
           <div>
-            <label for="template"></label>
-            <textarea id="grammar" name="grammar" placeholder="Use GBNF or JSON-Scheme + Converter" value="${params.value.grammar}" rows=4 oninput=${updateParams}/>
+            <div class="grammar">
+              <label for="template"></label>
+              <textarea id="grammar" name="grammar" placeholder="Use GBNF or JSON-Scheme + Converter" value="${params.value.grammar}" rows=4 oninput=${updateParams}/>
+            </div>
             <div class="grammar-columns">
               <div class="json-schema-controls">
                 <input type="text" name="prop-order" placeholder="Order: prop1,prop2,prop3" oninput=${updateGrammarJsonSchemaPropOrder} />
diff --git a/examples/server/themes/mount-ai/style.css b/examples/server/themes/mount-ai/style.css
index 95289d24c..c302869ac 100644
--- a/examples/server/themes/mount-ai/style.css
+++ b/examples/server/themes/mount-ai/style.css
@@ -78,8 +78,8 @@ p {
 
 .json-schema-controls {
   margin-top: 10px;
-  width: 97%;
-  max-width: 97%;
+  width: 100%;
+  max-width: 100%;
   display: grid;
   grid-template: "a a";
   gap: 1em;
@@ -443,7 +443,11 @@ button:disabled {
   box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
 }
 
-/* Grammar text field */
+.grammar {
+  width: 97%;
+  max-width: 97%;
+}
+
 textarea {
   padding: 5px;
   flex-grow: 1;