Fixed issue with modifier key and new styles for selected code

Author: CharlieDigital

web/components/QuasarImage.vue

@@ -1,7 +1,12 @@
 <template>
-  <figure class="q-py-md">
-    <QImg :src :style="{ maxHeight: maxHeight }" fit="scale-down" />
-    <figcaption class="text-caption text-center text-italic text-grey-6">
+  <figure class="q-py-md" :class="[$q.screen.lt.sm ? 'q-mx-sm' : undefined]">
+    <QImg
+      :src
+      :style="{ maxHeight: maxHeight }"
+      fit="scale-down"
+      class="rounded-borders"
+    />
+    <figcaption class="text-caption text-center text-italic text-grey-6 q-mt-sm">
       <slot />
     </figcaption>
   </figure>
@@ -12,6 +17,8 @@ defineProps<{
   src: string;
   maxHeight?: string;
 }>();
+
+const $q = useQuasar();
 </script>
 
 <style scoped></style>

web/components/QuasarVideo.vue

@@ -1,13 +1,13 @@
 <template>
-  <figure class="q-py-md">
+  <figure class="q-py-md" :class="[$q.screen.lt.sm ? 'q-mx-sm' : undefined]">
     <QVideo
-      :ratio="ratio ?? 16 / 9"
+      :ratio="ratio ? Number.parseFloat(ratio) : 16 / 9"
       :src
       :style="{ maxHeight: maxHeight }"
       fit="scale-down"
       class="rounded-borders"
     />
-    <figcaption class="text-caption text-center text-italic text-grey-6">
+    <figcaption class="text-caption text-center text-italic text-grey-6 q-mt-sm">
       <slot />
     </figcaption>
   </figure>
@@ -17,8 +17,10 @@
 defineProps<{
   src: string;
   maxHeight?: string;
-  ratio?: number;
+  ratio?: string;
 }>();
+
+const $q = useQuasar();
 </script>
 
 <style scoped></style>