Small screen layout fixes (#37)

* adjust dialog sizes

* add border

* dev server: starting url, start with #url=https://example.com/

---------

Co-authored-by: Ilya Kreymer <[email protected]>

Author: SuaYoo

src/archive-now.ts

@@ -367,7 +367,7 @@ class ArchiveNow extends LitElement {
           : html``}
       </div>
       <div
-        class="-mb-4 -mt-4 overflow-auto pb-4 pt-4 [grid-area:detail] lg:mr-0 lg:px-4 2xl:px-6"
+        class="-mb-4 overflow-auto border-t border-brand-green/30 pb-4 [grid-area:detail] lg:-mt-4 lg:mr-0 lg:border-t-0 lg:px-4 lg:pt-4 2xl:px-6"
       >
         <div class="mb-3 mt-3">
           <div
@@ -606,7 +606,7 @@ class ArchiveNow extends LitElement {
             <div
               class="${this.showHint
                 ? "pointer-events-auto"
-                : "pointer-events-none"} max-w-sm -translate-x-3 rounded-lg bg-white/80 shadow-lg shadow-cyan-800/20 ring-2 ring-cyan-300/50 backdrop-blur-md transition-all lg:mb-16 lg:translate-x-1"
+                : "pointer-events-none"} max-w-80 -translate-x-3 rounded-lg bg-white/80 shadow-lg shadow-cyan-800/20 ring-2 ring-cyan-300/50 backdrop-blur-md transition-all lg:mb-16 lg:translate-x-1"
             >
               <div
                 class="flex items-center justify-between p-2 leading-none"
@@ -692,10 +692,10 @@ class ArchiveNow extends LitElement {
           }}
         >
           <div class="flex flex-col">
-            <div class="flex items-end gap-3 px-3 pb-3">
+            <div class="flex flex-col items-end gap-3 pb-3 md:flex-row lg:px-3">
               <sl-input
                 name="url"
-                class="flex-1"
+                class="w-full flex-1"
                 label="Enter a URL"
                 placeholder=${DEFAULT_URL.replace(/\/$/, "")}
                 type="text"
@@ -704,7 +704,12 @@ class ArchiveNow extends LitElement {
                 spellcheck="false"
                 required
               ></sl-input>
-              <sl-button type="submit" variant="primary">Go</sl-button>
+              <sl-button
+                class="w-full md:max-w-min"
+                type="submit"
+                variant="primary"
+                >Go</sl-button
+              >
             </div>
             ${!this.isEmpty
               ? html`

src/global.css

@@ -61,7 +61,7 @@
       "header restart"
       "archive archive"
       "detail detail";
-    grid-template-rows: min-content 1fr min-content theme(size.48);
+    grid-template-rows: min-content 1fr 30%;
     grid-template-columns: 1fr auto;
   }
 

webpack.config.cjs

@@ -33,7 +33,7 @@ module.exports = (env, argv) => {
     devServer: {
       compress: true,
       port: 10001,
-      open: true,
+      open: "/#url=https://example.com/",
       static: path.join(__dirname, "dist"),
       hot: true,
     },