From 9a2d73c4b6345e7927a4b9915c7908010ad60aae Mon Sep 17 00:00:00 2001
From: Guillermo Marin <52298929+guillermoscript@users.noreply.github.com>
Date: Sun, 26 Jul 2026 20:11:37 +0200
Subject: [PATCH] fix(editor): stop the add-block palette from being clipped by
 the viewport
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The block palette lists 23 block types across 5 groups (~875px tall), but
PopoverContent had no height cap and no scroll, so the bottom of the list
was cut off by the viewport on desktop — "Separador" was unreachable and
the last row of "Estructura" sat half off-screen.

`popover.tsx` was the only base-ui overlay primitive missing the
`max-h-(--available-height) overflow-y-auto` treatment that select,
dropdown-menu and combobox already have, so fix it there: every
over-tall popover now scrolls inside the space the positioner reports
instead of overflowing (lesson-component-picker had the same latent bug).

Also bumped the palette's legibility: item labels 11px -> 12px at full
foreground contrast, group headings 10px/60% -> 11px at full
muted-foreground, and the popover 340px -> 360px so the wider labels fit.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MVN1bVpXJQ2CT7nv4acFRz
---
 components/teacher/block-editor/add-block-menu.tsx | 14 +++++++++-----
 components/ui/popover.tsx                          |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/teacher/block-editor/add-block-menu.tsx b/components/teacher/block-editor/add-block-menu.tsx
index 6be34e0de..213216786 100644
--- a/components/teacher/block-editor/add-block-menu.tsx
+++ b/components/teacher/block-editor/add-block-menu.tsx
@@ -91,6 +91,10 @@ interface AddBlockMenuProps {
   position?: 'top' | 'inline' | 'between'
 }
 
+// The palette is taller than the room most triggers leave on screen; PopoverContent
+// caps itself at `--available-height` and scrolls, so all 23 blocks stay reachable.
+const PALETTE_POPOVER_CLASS = 'w-[360px] p-3'
+
 export function AddBlockMenu({ onSelect, position = 'inline' }: AddBlockMenuProps) {
   const [open, setOpen] = useState(false)
 
@@ -111,7 +115,7 @@ export function AddBlockMenu({ onSelect, position = 'inline' }: AddBlockMenuProp
             <IconPlus className="h-3 w-3" />
           </PopoverTrigger>
         </div>
-        <PopoverContent align="center" side="bottom" className="w-[340px] p-3" sideOffset={4}>
+        <PopoverContent align="center" side="bottom" className={PALETTE_POPOVER_CLASS} sideOffset={4}>
           <BlockPalette onSelect={handleSelect} />
         </PopoverContent>
       </Popover>
@@ -128,7 +132,7 @@ export function AddBlockMenu({ onSelect, position = 'inline' }: AddBlockMenuProp
           <IconPlus className="h-4 w-4" />
           Añadir bloque
         </PopoverTrigger>
-        <PopoverContent align="center" side="bottom" className="w-[340px] p-3" sideOffset={4}>
+        <PopoverContent align="center" side="bottom" className={PALETTE_POPOVER_CLASS} sideOffset={4}>
           <BlockPalette onSelect={handleSelect} />
         </PopoverContent>
       </Popover>
@@ -144,7 +148,7 @@ export function AddBlockMenu({ onSelect, position = 'inline' }: AddBlockMenuProp
       >
         <IconPlus className="h-4 w-4" />
       </PopoverTrigger>
-      <PopoverContent align="end" side="bottom" className="w-[340px] p-3" sideOffset={4}>
+      <PopoverContent align="end" side="bottom" className={PALETTE_POPOVER_CLASS} sideOffset={4}>
         <BlockPalette onSelect={handleSelect} />
       </PopoverContent>
     </Popover>
@@ -159,7 +163,7 @@ function BlockPalette({ onSelect }: { onSelect: (type: BlockType) => void }) {
     <div className="space-y-3">
       {BLOCK_GROUPS.map((group) => (
         <div key={group.label}>
-          <p className="mb-1.5 px-1 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60">
+          <p className="mb-1.5 px-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
             {group.label}
           </p>
           <div className="grid grid-cols-3 gap-1.5">
@@ -181,7 +185,7 @@ function BlockPalette({ onSelect }: { onSelect: (type: BlockType) => void }) {
                   <div className={cn('flex h-8 w-8 items-center justify-center rounded-md', iconData.bg)}>
                     <Icon className={cn('h-4 w-4', iconData.color)} />
                   </div>
-                  <span className="text-[11px] font-medium leading-tight text-muted-foreground group-hover:text-foreground">
+                  <span className="text-xs font-medium leading-tight text-foreground/80 group-hover:text-foreground">
                     {meta?.label || type}
                   </span>
                 </button>
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index 52079097d..39272b473 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -37,7 +37,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-lg bg-popover p-2.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 flex max-h-(--available-height) w-72 origin-(--transform-origin) flex-col gap-4 overflow-y-auto overscroll-contain rounded-lg bg-popover p-2.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}