jules/astro-site-cerveau
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(insta): feed remplit toute la hauteur de colonne, Boutique collée en bas

Browse Source 
La zone de scroll avait une max-height fixe (420px) alors que la colonne
fait toute la hauteur de la page -> gros bandeau blanc entre le feed et
le footer. Passe en flex-col (header shrink-0, feed flex-1 scrollable,
Boutique shrink-0 collée en bas), le feed occupe maintenant tout
l'espace disponible.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Jules Neny
2026-07-07 17:55:43 +02:00
parent d58911a7e8
commit f642160d4b
2 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/astro/ColInsta.astro
View File

@@ -6,7 +6,7 @@ const JULESNENY_FEED = Array.from(
(_, i) => `/images/instagram/feed/feed-${String(i + 1).padStart(2, '0')}.jpg` (_, i) => `/images/instagram/feed/feed-${String(i + 1).padStart(2, '0')}.jpg`
); );
--- ---
<div class="h-full overflow-y-auto"> <div class="h-full overflow-hidden">
<InstaFeed <InstaFeed
client:visible client:visible
account="Jules Neny" account="Jules Neny"

11
src/components/vue/InstaFeed.vue
View File

@@ -9,8 +9,8 @@ defineProps<{
</script> </script>
<template> <template>
<section class="border-b border-neutral-200 last:border-b-0"> <section class="h-full flex flex-col border-b border-neutral-200 last:border-b-0">
<header class="px-4 py-3 flex items-center justify-between gap-3"> <header class="shrink-0 px-4 py-2 flex items-center justify-between gap-3">
<a <a
:href="accountUrl" :href="accountUrl"
target="_blank" target="_blank"
@@ -29,7 +29,7 @@ defineProps<{
</a> </a>
</header> </header>
<div class="insta-feed-scroll"> <div class="insta-feed-scroll flex-1 min-h-0">
<a <a
:href="accountUrl" :href="accountUrl"
target="_blank" target="_blank"
@@ -47,9 +47,9 @@ defineProps<{
</a> </a>
</div> </div>
<div class="px-4 py-2"> <div class="shrink-0 px-2 py-1">
<span <span
class="block text-center px-3 py-1.5 bg-neutral-200 text-neutral-400 rounded-lg text-xs cursor-not-allowed" class="block text-center px-3 py-1 bg-neutral-200 text-neutral-400 rounded text-xs cursor-not-allowed"
aria-disabled="true" aria-disabled="true"
title="Boutique — bientôt disponible" title="Boutique — bientôt disponible"
> >
@@ -61,7 +61,6 @@ defineProps<{
<style scoped> <style scoped>
.insta-feed-scroll { .insta-feed-scroll {
max-height: 420px;
overflow-y: auto; overflow-y: auto;
scrollbar-width: thin; scrollbar-width: thin;
} }