From c83a09363d043b677383298f02cdc6b0878837f6 Mon Sep 17 00:00:00 2001
From: Tim Olson <>
Date: Fri, 10 Nov 2023 18:38:55 -0400
Subject: [PATCH] order view responsiveness

---
 src/components/Orders.vue    | 4 ++--
 src/components/PhoneCard.vue | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Orders.vue b/src/components/Orders.vue
index 1169f91..82cbf44 100644
--- a/src/components/Orders.vue
+++ b/src/components/Orders.vue
@@ -33,8 +33,8 @@
         </td>
         <td class="status">
           <v-chip v-if="state===-1" prepend-icon="mdi-signature" color="yellow">Signing</v-chip>
-          <v-chip v-if="state===0" class="d-none d-lg-inline" prepend-icon="mdi-dots-horizontal" color="green">Open</v-chip>
-          <btn v-if="state===0" class="d-none d-sm-inline-block d-lg-none" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,index)">Cancel</btn>
+          <v-chip v-if="state===0" class="d-none d-lg-inline-flex" prepend-icon="mdi-dots-horizontal" color="green">Open</v-chip>
+          <btn v-if="state===0" class="d-none d-sm-inline-flex d-lg-none" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,index)">Cancel</btn>
           <btn v-if="state===0" class="d-sm-none" variant="plain" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,index)"/>
           <v-chip v-if="state===1" prepend-icon="mdi-cancel" color="red">Canceled</v-chip>
           <v-chip v-if="state===2" prepend-icon="mdi-check-circle-outline" color="green">Completed</v-chip>
diff --git a/src/components/PhoneCard.vue b/src/components/PhoneCard.vue
index 867ab6d..b45501c 100644
--- a/src/components/PhoneCard.vue
+++ b/src/components/PhoneCard.vue
@@ -2,11 +2,12 @@
   <!-- todo use javascript media breakpoint instead of display classes so we dont double-render the slot -->
   <div>
     <!-- tablets and desktops get a card outline -->
-    <v-card class="d-none d-sm-block phone-card" :elevation="4">
+    <v-card class="d-none d-sm-block phone-card" :elevation="4" :title="title">
       <slot/>
     </v-card>
     <!-- phones use the entire screen -->
     <div class="d-sm-none pa-0">
+      <v-card-title>{{title}}</v-card-title>
       <slot class="pa-0"/>
     </div>
   </div>
@@ -15,6 +16,7 @@
 <script setup>
 import {useStore} from "@/store/store";
 const s = useStore()
+const props = defineProps(['title'])
 
 </script>