vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(posts): scale the preview phone mockup down on mobile for side padding

Browse source 
The 380px mockup frame is wider than a phone viewport, so it sat edge-to-edge. Scale it to 90% below lg (origin top-center keeps it centered) so there's clean symmetric padding to the screen edges. Reverts the now-redundant px-2 container tweak back to px-4.
This commit is contained in:
Paulo Castellano 2026-07-17 19:24:55 -03:00
parent ca42a9f0ef
commit e31116c4b7
2 changed files with 2 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/js/components/PhoneMockup.vue
View file

@ -9,7 +9,7 @@ withDefaults(defineProps<Props>(), {
</script>
<template>
<div class="relative mx-auto select-none origin-top">
<div class="relative mx-auto origin-top scale-90 select-none lg:scale-100">
<!-- Phone Frame - iPhone 14 Pro style -->
<div class="relative bg-[#1a1a1a] rounded-[44px] p-[10px] ring-1 ring-white/10">
<!-- Inner frame -->

2
resources/js/components/posts/editor/PreviewTab.vue
View file

@ -94,7 +94,7 @@ const activeContentType = computed((): string | undefined => {
</div>
</div>
<div class="flex flex-1 items-start justify-center overflow-x-hidden px-2 pb-8 pt-6 sm:px-4">
<div class="flex flex-1 items-start justify-center overflow-x-hidden px-4 pb-8 pt-6">
<PhoneMockup v-if="activePlatform">
<PlatformPreview
:platform="activePlatform.platform"