Skip to content

Commit 04f9c52

Browse files
liorcodevliorcodev
committed
fix: prevent horizontal overflow in main layout and code sections
1 parent 538dda5 commit 04f9c52

2 files changed

Lines changed: 55 additions & 40 deletions

File tree

‎app/assets/css/main.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@ body {
9393
font-family: var(--font-sans);
9494
-webkit-font-smoothing: antialiased;
9595
-moz-osx-font-smoothing: grayscale;
96+
overflow-x: hidden;
97+
max-width: 100vw;
9698
}
9799

98100
html {

‎app/pages/index.vue‎

Lines changed: 53 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ const features = [
115115
</script>
116116

117117
<template>
118-
<div class="relative bg-white">
118+
<div class="relative bg-white overflow-x-hidden">
119119
<!-- ─── Hero ─────────────────────────────────────────── -->
120120
<section
121121
class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden px-4 py-12 bg-linear-to-b from-orange-50/40 via-white to-amber-50/20"
@@ -227,15 +227,15 @@ const features = [
227227
<!-- Code preview -->
228228
<div class="grid md:grid-cols-2 gap-8 text-left max-w-6xl mx-auto">
229229
<!-- Server -->
230-
<div class="relative group">
230+
<div class="relative group min-w-0">
231231
<div
232232
class="absolute -inset-1 bg-linear-to-r from-orange-400 to-red-400 rounded-3xl blur-xl opacity-20 group-hover:opacity-30 transition duration-500"
233233
></div>
234234
<div
235-
class="relative bg-white rounded-3xl overflow-hidden border-2 border-orange-200/70 shadow-2xl group-hover:border-orange-300 transition-all"
235+
class="relative bg-white rounded-3xl overflow-hidden border-2 border-orange-200/70 shadow-2xl group-hover:border-orange-300 transition-all min-w-0"
236236
>
237237
<div
238-
class="bg-linear-to-br from-orange-50 via-white to-amber-50 px-6 py-4 border-b-2 border-orange-200/50"
238+
class="bg-linear-to-br from-orange-50 via-white to-amber-50 px-4 sm:px-6 py-4 border-b-2 border-orange-200/50"
239239
>
240240
<div class="flex items-center gap-3">
241241
<div class="flex gap-1.5">
@@ -253,22 +253,26 @@ const features = [
253253
<span class="text-sm font-mono font-bold text-slate-600">server.ts</span>
254254
</div>
255255
</div>
256-
<div class="p-6 bg-linear-to-br from-white to-orange-50/30">
257-
<MDC :value="serverCode" />
256+
<div
257+
class="p-4 sm:p-6 bg-linear-to-br from-white to-orange-50/30 overflow-x-auto max-w-full"
258+
>
259+
<div class="min-w-max sm:min-w-0">
260+
<MDC :value="serverCode" />
261+
</div>
258262
</div>
259263
</div>
260264
</div>
261265

262266
<!-- Client -->
263-
<div class="relative group">
267+
<div class="relative group min-w-0">
264268
<div
265269
class="absolute -inset-1 bg-linear-to-r from-orange-400 to-red-400 rounded-3xl blur-xl opacity-20 group-hover:opacity-30 transition duration-500"
266270
></div>
267271
<div
268-
class="relative bg-white rounded-3xl overflow-hidden border-2 border-orange-200/70 shadow-2xl group-hover:border-orange-300 transition-all"
272+
class="relative bg-white rounded-3xl overflow-hidden border-2 border-orange-200/70 shadow-2xl group-hover:border-orange-300 transition-all min-w-0"
269273
>
270274
<div
271-
class="bg-linear-to-br from-orange-50 via-white to-amber-50 px-6 py-4 border-b-2 border-orange-200/50"
275+
class="bg-linear-to-br from-orange-50 via-white to-amber-50 px-4 sm:px-6 py-4 border-b-2 border-orange-200/50"
272276
>
273277
<div class="flex items-center gap-3">
274278
<div class="flex gap-1.5">
@@ -286,8 +290,12 @@ const features = [
286290
<span class="text-sm font-mono font-bold text-slate-600">client.ts</span>
287291
</div>
288292
</div>
289-
<div class="p-6 bg-linear-to-br from-white to-orange-50/30">
290-
<MDC :value="clientCode" />
293+
<div
294+
class="p-4 sm:p-6 bg-linear-to-br from-white to-orange-50/30 overflow-x-auto max-w-full"
295+
>
296+
<div class="min-w-max sm:min-w-0">
297+
<MDC :value="clientCode" />
298+
</div>
291299
</div>
292300
</div>
293301
</div>
@@ -296,7 +304,7 @@ const features = [
296304
</section>
297305

298306
<!-- ─── Features ──────────────────────────────────────── -->
299-
<section class="relative py-32 px-4 bg-white">
307+
<section class="relative py-32 px-4 bg-white overflow-x-hidden">
300308
<div class="max-w-7xl mx-auto">
301309
<div class="text-center mb-20">
302310
<div class="inline-block mb-4">
@@ -344,7 +352,7 @@ const features = [
344352

345353
<!-- ─── How it works ──────────────────────────────────── -->
346354
<!-- ─── Deploy Anywhere ──────────────────────────────────── -->
347-
<section class="py-32 px-4 bg-linear-to-b from-orange-50 to-white">
355+
<section class="py-32 px-4 bg-linear-to-b from-orange-50 to-white overflow-x-hidden">
348356
<div class="max-w-5xl mx-auto">
349357
<div class="text-center mb-16">
350358
<div class="inline-block mb-4">
@@ -390,42 +398,44 @@ const features = [
390398
<span class="text-sm font-mono font-bold text-slate-600">index.ts</span>
391399
</div>
392400
</div>
393-
<div class="p-6 bg-linear-to-br from-white to-orange-50/30">
401+
<div class="p-4 sm:p-6 bg-linear-to-br from-white to-orange-50/30 overflow-x-auto">
394402
<MDC :value="webStandardCode" />
395403
</div>
396404
</div>
397405
</div>
398406

399407
<!-- Flow visualization -->
400-
<div class="mt-12 flex items-center justify-center gap-6 text-center">
401-
<div class="flex-1">
408+
<div
409+
class="mt-12 flex items-center justify-center gap-3 sm:gap-6 text-center overflow-x-auto px-4"
410+
>
411+
<div class="flex-1 min-w-20">
402412
<div
403-
class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-orange-100 text-orange-600 mb-3"
413+
class="inline-flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-2xl bg-orange-100 text-orange-600 mb-3"
404414
>
405-
<Icon name="heroicons:arrow-down-tray" class="text-2xl" />
415+
<Icon name="heroicons:arrow-down-tray" class="text-lg sm:text-2xl" />
406416
</div>
407-
<div class="text-sm font-bold text-slate-700">Request</div>
408-
<div class="text-xs text-slate-500">Standard Web API</div>
417+
<div class="text-xs sm:text-sm font-bold text-slate-700">Request</div>
418+
<div class="text-xs text-slate-500 hidden sm:block">Standard Web API</div>
409419
</div>
410-
<div class="text-3xl text-orange-500 font-bold">→</div>
411-
<div class="flex-1">
420+
<div class="text-xl sm:text-3xl text-orange-500 font-bold shrink-0">→</div>
421+
<div class="flex-1 min-w-20">
412422
<div
413-
class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-linear-to-br from-orange-500 to-red-500 text-white mb-3 shadow-xl animate-pulse-glow"
423+
class="inline-flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-2xl bg-linear-to-br from-orange-500 to-red-500 text-white mb-3 shadow-xl animate-pulse-glow"
414424
>
415-
<Icon name="heroicons:bolt" class="text-2xl" />
425+
<Icon name="heroicons:bolt" class="text-lg sm:text-2xl" />
416426
</div>
417-
<div class="text-sm font-bold text-slate-900">d.fetch()</div>
418-
<div class="text-xs text-slate-500">Your typed API</div>
427+
<div class="text-xs sm:text-sm font-bold text-slate-900">d.fetch()</div>
428+
<div class="text-xs text-slate-500 hidden sm:block">Your typed API</div>
419429
</div>
420-
<div class="text-3xl text-orange-500 font-bold">→</div>
421-
<div class="flex-1">
430+
<div class="text-xl sm:text-3xl text-orange-500 font-bold shrink-0">→</div>
431+
<div class="flex-1 min-w-20">
422432
<div
423-
class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-amber-100 text-amber-600 mb-3"
433+
class="inline-flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-2xl bg-amber-100 text-amber-600 mb-3"
424434
>
425-
<Icon name="heroicons:arrow-up-tray" class="text-2xl" />
435+
<Icon name="heroicons:arrow-up-tray" class="text-lg sm:text-2xl" />
426436
</div>
427-
<div class="text-sm font-bold text-slate-700">Response</div>
428-
<div class="text-xs text-slate-500">Standard Web API</div>
437+
<div class="text-xs sm:text-sm font-bold text-slate-700">Response</div>
438+
<div class="text-xs text-slate-500 hidden sm:block">Standard Web API</div>
429439
</div>
430440
</div>
431441

@@ -518,25 +528,28 @@ const features = [
518528
{ from: 'procedure.use()', to: '.middleware()' }
519529
]"
520530
:key="row.from"
521-
class="grid grid-cols-[1fr_auto_1fr] items-center gap-4 px-6 py-4 rounded-xl border-2 border-orange-100 bg-linear-to-r from-orange-50/50 to-amber-50/50 hover:border-orange-300 transition-all"
531+
class="grid grid-cols-[1fr_auto_1fr] items-center gap-2 sm:gap-4 px-3 sm:px-6 py-3 sm:py-4 rounded-xl border-2 border-orange-100 bg-linear-to-r from-orange-50/50 to-amber-50/50 hover:border-orange-300 transition-all min-w-0"
522532
>
523-
<span class="text-slate-500 text-right font-mono text-sm font-medium">{{
524-
row.from
525-
}}</span>
533+
<span
534+
class="text-slate-500 text-right font-mono text-xs sm:text-sm font-medium truncate"
535+
>{{ row.from }}</span
536+
>
526537
<div
527-
class="w-10 h-10 rounded-full bg-linear-to-br from-orange-500 to-red-500 flex items-center justify-center"
538+
class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-linear-to-br from-orange-500 to-red-500 flex items-center justify-center shrink-0"
528539
>
529-
<Icon name="heroicons:arrow-right" class="text-white text-lg font-bold" />
540+
<Icon name="heroicons:arrow-right" class="text-white text-sm sm:text-lg font-bold" />
530541
</div>
531-
<span class="text-slate-900 font-bold font-mono text-sm">{{ row.to }}</span>
542+
<span class="text-slate-900 font-bold font-mono text-xs sm:text-sm truncate">{{
543+
row.to
544+
}}</span>
532545
</div>
533546
</div>
534547
</div>
535548
</section>
536549

537550
<!-- ─── CTA ───────────────────────────────────────────── -->
538551
<section
539-
class="py-32 px-4 relative overflow-hidden bg-linear-to-br from-orange-600 via-red-600 to-orange-700"
552+
class="py-32 px-4 relative overflow-x-hidden bg-linear-to-br from-orange-600 via-red-600 to-orange-700"
540553
>
541554
<!-- Animated background -->
542555
<div

0 commit comments

Comments
 (0)