Prestaking Button & preview in addressOverview

responsive behavior finetuning
nimiq · Jun 12, 2024 · 9d171b3 · 9d171b3
1 parent eebe77b
commit 9d171b3
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/components/layouts/AddressOverview.vue b/src/components/layouts/AddressOverview.vue
@@ -133,7 +133,7 @@
                     />
 
                     <template v-if="activeCurrency === 'nim'"> <!-- TODO: show preview if prestaking-->
-                        <PrestakingPreview v-if="activePrestake" />
+                        <PrestakingPreview v-if="activePrestake && windowWidth > 860" />
                         <PrestakingButton v-else />
                     </template>
 
@@ -316,7 +316,7 @@ export default defineComponent({
         const address$ = ref<HTMLDivElement>(null);
         const addressMasked = ref<boolean>(false);
 
-        const { isMobile, isFullDesktop } = useWindowSize();
+        const { isMobile, isFullDesktop, width: windowWidth } = useWindowSize();
 
         useElementResize(address$, () => {
             let addressWidth: number;
@@ -550,6 +550,7 @@ export default defineComponent({
             config,
             convertBridgedUsdcToNative,
             activePrestake,
+            windowWidth,
         };
     },
     components: {
@@ -944,6 +945,10 @@ export default defineComponent({
     }
 }
 
+.prestaking-button {
+    margin-left: 1rem;
+}
+
 .send, .receive {
     margin: 0 0.5rem;
     align-items: center;