Support widget at full width

dnsimple · Dec 19, 2024 · f36c3a9 · f36c3a9
1 parent 1d633f9
commit f36c3a9
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/_widget/src/components/app/component.vue b/_widget/src/components/app/component.vue
@@ -1,8 +1,11 @@
 <template>
     <div id="dnsimple-support">
-        <div v-if="isOpen" class="relative animated fadeInUp faster">
-            <Header :app="app" ref="header"/>
-            <Component :is="currentRoute[0]" :app="app" :article="currentRoute[1]"></Component>
+        <div v-if="isOpen">
+            <div class="overlay" @click="close"></div>
+            <div class="modal animated fadeInUp faster">
+              <Header :app="app" ref="header"/>
+              <Component :is="currentRoute[0]" :app="app" :article="currentRoute[1]"></Component>
+            </div>
         </div>
         <Prompt v-else :app="app"/>
     </div>

diff --git a/_widget/src/components/app/style.scss b/_widget/src/components/app/style.scss
@@ -1,8 +1,9 @@
 #dnsimple-support {
   position: fixed;
-  bottom: 0;
+  top: 0;
   right: 0;
-  width: 480px;
+  bottom: 0;
+  left: 0;
   font-size: var(--dnsimple-support-widget-rem);
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   line-height: 1.6;
@@ -15,17 +16,36 @@
 }
 
 #dnsimple-support {
+    .modal {
+        max-width: 45rem;
+        margin-top: 5vh;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 5vh;
+    }
+
+    .overlay {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.8);
+    }
+
     .relative {
       position: relative;
       box-shadow: var(--dnsimple-support-widget-box-shadow);
     }
 
     .route {
       height: 475px;
-      border-left: 1px solid var(--dnsimple-support-widget-line-color);
+      border: 1px solid var(--dnsimple-support-widget-line-color);
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
       padding: var(--dnsimple-support-widget-padding);
       background: var(--dnsimple-support-widget-white);
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
     }
 }
diff --git a/_widget/src/components/header/style.scss b/_widget/src/components/header/style.scss
@@ -4,6 +4,7 @@
     text-align: center;
     padding: var(--dnsimple-support-widget-padding);
     border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
 
     h1 {
       color: var(--dnsimple-support-widget-white);