From f719bf056de0a8e0a14470aad00d6a18fbd39334 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Dobr=C3=BD?= <jakub.dobry8@gmail.com>
Date: Thu, 18 Apr 2024 04:25:15 +0200
Subject: [PATCH] Improve metadata & authorization button

---
 web/src/app/page.tsx  | 20 +++++++++++++-------
 web/src/scss/App.scss | 12 ++++++++++++
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 75ccebe..9ee3545 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -29,33 +29,39 @@ export default function Home() {
           <p className="mt-4 text-secondary">{description}</p>
         </div>
       </div>
-      <div className="container py-3 d-flex flex-wrap column-gap-5 row-gap-2 align-items-end">
-        <div className="d-inline-block">
+      <div className="container py-3 d-grid column-gap-4 row-gap-4 align-items-center grid-settings-global">
+        <div>
           Method
-          <Form.Select aria-label="Method selection">
+          <Form.Select
+            aria-label="Method selection"
+            style={{ width: "10rem" }}
+            size="sm"
+          >
             <option value="web">grpc-web</option>
             <option value="server" disabled={true}>
               grpc-server (NOT IMPLEMENTED)
             </option>
           </Form.Select>
         </div>
-        <div className="flex-grow-1">
+        <div>
           <div>Base gRPC Url</div>
           <Form.Control
             as="input"
-            className="w-100"
             onChange={(e) => setHostname(e.target.value)}
             value={hostname}
+            size="sm"
+            style={{ width: "20rem" }}
             data-testid="hostname-input"
           />
         </div>
-        <div>
+        <hr className="d-block d-lg-none" />
+        <div className="ms-lg-auto">
           <Button
             variant="outline-primary"
             onClick={() => setShowMetadataModal(true)}
             data-testid="metadata-button"
           >
-            Metadata
+            Metadata & Authorization
           </Button>
           <MetadataModal
             show={showMetadataModal}
diff --git a/web/src/scss/App.scss b/web/src/scss/App.scss
index 3a16807..66cf4de 100644
--- a/web/src/scss/App.scss
+++ b/web/src/scss/App.scss
@@ -27,4 +27,16 @@ $primary: green;
     display: flex;
     align-items: center;
   }
+}
+
+.grid-settings-global {
+  grid-template-columns: auto auto 1fr;
+
+  @include media-breakpoint-down(lg) {
+    grid-template-columns: auto;
+
+    button, input {
+      width: 100% !important;
+    }
+  }
 }
\ No newline at end of file