SimpleChatTCRV:UI Cleanup: scrollOnlyIf, Tool HR, Msg Margin

Limit scroll to veritical dir and inturn show only when needed

Move the Tool Call Edit UI's HR into its div.

Add a bottom margin wrt the individual chat messages.

tools/server/public_simplechat/index.html

@@ -44,23 +44,20 @@
                 <p> You need to have javascript enabled.</p>
             </div>
 
-            <hr>
             <div id="tool-div">
-                <div>
+                <hr>
                 <div class="sameline">
                     <textarea id="toolname-in" class="flex-grow" rows="1" placeholder="name of tool to run"></textarea>
                     <button id="tool-btn">run tool</button>
                 </div>
-                </div>
                 <div class="sameline">
-                <textarea id="toolargs-in" class="flex-grow" rows="2" placeholder="arguments to pass to the specified tool"></textarea>
+                    <textarea id="toolargs-in" class="flex-grow" rows="2" placeholder="arguments to pass to the specified tool"></textarea>
                 </div>
             </div>
 
             <hr>
             <div class="sameline">
                 <textarea id="user-in" class="flex-grow" rows="2" placeholder="enter your query to the ai model here" ></textarea>
-                <!-- input id="file-btn" type="file">file</input -->
                 <button id="user-btn">submit</button>
             </div>
 

tools/server/public_simplechat/simplechat.css

@@ -38,6 +38,8 @@
     border-width: thin;
     border-radius: 2px;
     display: flex;
+    margin-bottom: 2vh;
+    /* box-shadow: 1px 1px 4px lightslategray; */
 }
 .chat-message-role {
     border-style: dotted;
@@ -101,7 +103,7 @@
 }
 
 #chat-div {
-    overflow: scroll;
+    overflow-y: auto;
     flex-grow: 1;
     flex-shrink: 1;
     min-height: 40vh;