Fix code16/sharp-dev#406

Author: aguingand

resources/js/form/components/fields/upload/Upload.vue

@@ -393,8 +393,8 @@
                 <div :class="{ 'bg-background border rounded-md p-4': !asEditorEmbed }">
                     <div class="flex gap-4">
                         <template v-if="transformedImg ?? value?.thumbnail ?? uppyFile?.preview">
-                            <div class="self-center group/img relative flex flex-col justify-center rounded-md overflow-hidden">
-                                <img class="rounded-md max-h-[150px] max-w-[150px]"
+                            <div class="self-center group/img relative rounded-md overflow-hidden">
+                                <img class="rounded-md min-w-[50px] max-h-[150px] max-w-[150px] object-contain"
                                     :class="uppyFile && !transformedImg && field.imageCropRatio ? 'object-cover aspect-(--ratio)' : ''"
                                     :style="{
                                         '--ratio': field.imageCropRatio ? `${field.imageCropRatio[0]} / ${field.imageCropRatio[1]}` : null

resources/js/show/components/fields/File.vue

@@ -23,13 +23,15 @@
 
 <template>
     <ShowFieldLayout v-bind="props">
-        <div class="flex gap-4 p-4 border rounded-md max-w-[500px]">
+        <div class="flex gap-4 p-4 border rounded-md max-w-[600px]">
             <template v-if="value">
                 <template v-if="value.thumbnail">
-                    <img class="self-center rounded-sm max-w-[100px] max-h-[100px]"
-                        :src="value.thumbnail"
-                        :alt="field.label"
-                    >
+                    <div class="self-center">
+                        <img class="rounded-sm min-w-[40px] max-w-[100px] max-h-[100px] object-contain"
+                            :src="value.thumbnail"
+                            :alt="field.label"
+                        >
+                    </div>
                 </template>
                 <template v-else>
                     <FileIcon class="self-center size-4" :mime-type="value.mime_type" />

resources/js/show/components/fields/text/nodes/Embed.vue

@@ -13,7 +13,7 @@
 </script>
 
 <template>
-    <component :is="embed.tag" class="block my-4 first:mt-0 last:mb-0 bg-background border rounded-md p-4">
+    <component :is="embed.tag" class="block my-4 first:mt-0 last:mb-0 bg-background border rounded-md p-4 max-w-[600px]">
         <template v-if="embed.displayEmbedHeader">
             <EmbedHeader :embed="embed" />
         </template>