order view responsiveness

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>