Improve metadata & authorization button

dobrac · Apr 18, 2024 · f719bf0 · f719bf0
1 parent b1bdeb6
commit f719bf0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git 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
@@ -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;
+    }
+  }
 }