update size managment

src/page/Home.vue

@@ -55,11 +55,11 @@
       <input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="0" max="1" step="0.1" v-model="backgroundHoverOpacity" id="background-hover-opacity">
     </div>
   </div>
-  <div class="space-y-6">
+  <div class="space-y-6" ref="ogwrapper">
     <div class="og" ref="og" :style="ogStyle()">
       <div class="og-image" :style="ogImageStyle()">
         <div class="og-image-hover" :style="ogImageHoverStyle()">
-          <div class="h-full w-full px-10 flex flex-col justify-between">
+          <div class="h-full px-10 flex flex-col justify-between">
             <div>
               <h1 class="pt-10 leading-none" v-text="heading" :style="ogHeadingStyle()"></h1>
               <p class="mt-10 mb-16 leading-tight" v-text="subheading" :style="ogSubheadingStyle()"></p>
@@ -77,7 +77,7 @@
       </div>
     </div>
 
-    <div class="inline-flex rounded-md shadow-sm" role="group">
+    <div class="rounded-md text-center" role="group">
       <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white" v-on:click="downloadAsPng">
         PNG
       </button>
@@ -92,6 +92,8 @@
 .og {
   background: #cecece;
   font-family: Trebuchet MS;
+  max-width: 10px;
+  margin: auto;
 }
 
 .og-heading {
@@ -126,15 +128,18 @@ export default {
       backgroundHoverOpacity: localStorage.getItem('backgroundHoverOpacity') ?? 0,
       headingSize: localStorage.getItem('headingSize') ?? 4,
       subheadingSize: localStorage.getItem('subheadingSize') ?? 2,
-      width: 1920,
+      width: localStorage.getItem('width') ?? 1920,
-      height: 1080,
+      height: localStorage.getItem('height') ?? 1080,
-      quality: 0.9,
+      quality: localStorage.getItem('quality') ?? 0.9,
+      ogMaxWidth: 100,
     }
   },
   methods: {
     ogStyle() {
       return {
         color: this.textColor,
+        width: `${this.width}px`,
+        maxWidth: `${this.ogMaxWidth}px`
       }
     },
     ogImageStyle() {
@@ -211,6 +216,11 @@ export default {
 
       return null
     },
+    updateOgMaxWidth() {
+      this.$refs.og.classList.display = 'none'
+      this.ogMaxWidth = this.$refs.ogwrapper.offsetWidth
+      this.$refs.og.style.display = 'block'
+    },
   },
   watch: {
     author(value) {
@@ -246,6 +256,19 @@ export default {
     subheadingSize(value) {
       localStorage.setItem('subheadingSize', value)
     },
+    width(value) {
+      localStorage.setItem('width', value)
+    },
+    height(value) {
+      localStorage.setItem('height', value)
+    },
+    quality(value) {
+      localStorage.setItem('quality', value)
+    },
+  },
+  mounted() {
+    this.updateOgMaxWidth()
+    window.addEventListener('resize', this.updateOgMaxWidth, false)
   }
 }
 </script>