<div><span class="lbl">Action bar with quick view (hover or Tab into a card)</span>
<ul class="qv">
<li class="qv-card">
<div class="qv-media">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=600&q=70" alt="White minimalist wristwatch with a silicone strap on a pale grey surface" width="600" height="600" loading="lazy">
<span class="qv-badge">New</span>
<div class="qv-actions">
<button type="button" class="qv-btn is-main" data-quick-view="qv-watch"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>Quick view<span class="sr-only">: Linea Minimal Watch</span></button>
<button type="button" class="qv-btn is-icon" aria-label="Add Linea Minimal Watch to cart"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg></button>
<button type="button" class="qv-btn is-icon qv-wish" aria-pressed="false" aria-label="Save Linea Minimal Watch to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="qv-heart" d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
</div>
</div>
<div class="qv-info"><div><h3 class="qv-title"><a href="#">Linea Minimal Watch</a></h3><p class="qv-sub">3 strap colours</p></div><p class="qv-price">$189</p></div>
</li>
<li class="qv-card">
<div class="qv-media">
<img src="https://images.unsplash.com/photo-1583394838336-acd977736f90?auto=format&fit=crop&w=600&q=70" alt="Grey over-ear headphones with padded cups on a white background" width="600" height="600" loading="lazy">
<div class="qv-actions">
<button type="button" class="qv-btn is-main" data-quick-view="qv-phones"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>Quick view<span class="sr-only">: Studio Over-Ear Headphones</span></button>
<button type="button" class="qv-btn is-icon" aria-label="Add Studio Over-Ear Headphones to cart"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg></button>
<button type="button" class="qv-btn is-icon qv-wish" aria-pressed="false" aria-label="Save Studio Over-Ear Headphones to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="qv-heart" d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
</div>
</div>
<div class="qv-info"><div><h3 class="qv-title"><a href="#">Studio Over-Ear Headphones</a></h3><p class="qv-sub">Wired · 40 mm drivers</p></div><p class="qv-price">$129</p></div>
</li>
<li class="qv-card">
<div class="qv-media">
<img src="https://images.unsplash.com/photo-1584917865442-de89df76afd3?auto=format&fit=crop&w=600&q=70" alt="Glossy red top-handle handbag with a silver clasp" width="600" height="600" loading="lazy">
<span class="qv-badge">Limited</span>
<div class="qv-actions">
<button type="button" class="qv-btn is-main" data-quick-view="qv-bag"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>Quick view<span class="sr-only">: Lacquer Top-Handle Bag</span></button>
<button type="button" class="qv-btn is-icon" aria-label="Add Lacquer Top-Handle Bag to cart"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg></button>
<button type="button" class="qv-btn is-icon qv-wish" aria-pressed="true" aria-label="Save Lacquer Top-Handle Bag to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="qv-heart" d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
</div>
</div>
<div class="qv-info"><div><h3 class="qv-title"><a href="#">Lacquer Top-Handle Bag</a></h3><p class="qv-sub">Patent leather</p></div><p class="qv-price">$265</p></div>
</li>
</ul>
<dialog class="qv-dialog" id="qv-watch" aria-labelledby="qv-watch-title">
<div class="qv-dialog-grid">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=800&q=70" alt="White minimalist wristwatch with a silicone strap on a pale grey surface" width="800" height="800" loading="lazy">
<div class="qv-dialog-body">
<h2 id="qv-watch-title">Linea Minimal Watch</h2>
<p class="qv-rating"><span class="qv-stars" style="--r:4.6" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.6 out of 5, 182 reviews</span><span aria-hidden="true">4.6 (182 reviews)</span></p>
<p class="qv-price">$189</p>
<p class="qv-desc">A 38 mm brushed steel case with a matte black dial, sapphire-coated glass and a quick-release silicone strap. Water resistant to 50 m.</p>
<p class="qv-note">Free shipping over $100 · 30-day returns</p>
<button type="button" class="qv-add">Add<span class="sr-only"> Linea Minimal Watch</span> to cart</button>
<form method="dialog"><button class="qv-close" aria-label="Close quick view"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button></form>
</div>
</div>
</dialog>
<dialog class="qv-dialog" id="qv-phones" aria-labelledby="qv-phones-title">
<div class="qv-dialog-grid">
<img src="https://images.unsplash.com/photo-1583394838336-acd977736f90?auto=format&fit=crop&w=800&q=70" alt="Grey over-ear headphones with padded cups on a white background" width="800" height="800" loading="lazy">
<div class="qv-dialog-body">
<h2 id="qv-phones-title">Studio Over-Ear Headphones</h2>
<p class="qv-rating"><span class="qv-stars" style="--r:4.4" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.4 out of 5, 641 reviews</span><span aria-hidden="true">4.4 (641 reviews)</span></p>
<p class="qv-price">$129</p>
<p class="qv-desc">Closed-back monitoring headphones with 40 mm drivers, memory-foam cushions and a detachable 3 m coiled cable. Fold flat for travel.</p>
<p class="qv-note">Free shipping over $100 · 2-year warranty</p>
<button type="button" class="qv-add">Add<span class="sr-only"> Studio Over-Ear Headphones</span> to cart</button>
<form method="dialog"><button class="qv-close" aria-label="Close quick view"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button></form>
</div>
</div>
</dialog>
<dialog class="qv-dialog" id="qv-bag" aria-labelledby="qv-bag-title">
<div class="qv-dialog-grid">
<img src="https://images.unsplash.com/photo-1584917865442-de89df76afd3?auto=format&fit=crop&w=800&q=70" alt="Glossy red top-handle handbag with a silver clasp" width="800" height="800" loading="lazy">
<div class="qv-dialog-body">
<h2 id="qv-bag-title">Lacquer Top-Handle Bag</h2>
<p class="qv-rating"><span class="qv-stars" style="--r:4.8" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.8 out of 5, 54 reviews</span><span aria-hidden="true">4.8 (54 reviews)</span></p>
<p class="qv-price">$265</p>
<p class="qv-desc">Structured patent leather with a turn-lock clasp, suede lining and a detachable shoulder strap. Fits a phone, wallet and keys.</p>
<p class="qv-note">Limited run of 300 · Free returns</p>
<button type="button" class="qv-add">Add<span class="sr-only"> Lacquer Top-Handle Bag</span> to cart</button>
<form method="dialog"><button class="qv-close" aria-label="Close quick view"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button></form>
</div>
</div>
</dialog></div>
<div><span class="lbl">Icon rail (hover or Tab into a card)</span>
<ul class="qv">
<li class="qv-card">
<div class="qv-media">
<img src="https://images.unsplash.com/photo-1602810318383-e386cc2a3ccf?auto=format&fit=crop&w=600&q=70" alt="Three folded dress shirts in grey, white and burgundy on a wooden board" width="600" height="600" loading="lazy">
<div class="qv-rail">
<button type="button" class="qv-btn is-icon qv-wish" aria-pressed="false" aria-label="Save Oxford Shirt Trio to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="qv-heart" d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
<button type="button" class="qv-btn is-icon is-compare qv-wish" aria-pressed="false" aria-label="Compare Oxford Shirt Trio"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4v16M17 4v16M3 8l4-4 4 4M13 16l4 4 4-4"/></svg></button>
<button type="button" class="qv-btn is-icon" aria-label="Add Oxford Shirt Trio to cart"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg></button>
</div>
</div>
<div class="qv-info"><div><h3 class="qv-title"><a href="#">Oxford Shirt Trio</a></h3><p class="qv-sub">Set of 3 · slim fit</p></div><p class="qv-price">$138</p></div>
</li>
<li class="qv-card">
<div class="qv-media">
<img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=600&q=70" alt="Woman in a bright yellow fleece tracksuit standing on a beach promenade" width="600" height="600" loading="lazy">
<span class="qv-badge">Trending</span>
<div class="qv-rail">
<button type="button" class="qv-btn is-icon qv-wish" aria-pressed="true" aria-label="Save Sunday Fleece Set to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="qv-heart" d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
<button type="button" class="qv-btn is-icon is-compare qv-wish" aria-pressed="false" aria-label="Compare Sunday Fleece Set"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4v16M17 4v16M3 8l4-4 4 4M13 16l4 4 4-4"/></svg></button>
<button type="button" class="qv-btn is-icon" aria-label="Add Sunday Fleece Set to cart"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg></button>
</div>
</div>
<div class="qv-info"><div><h3 class="qv-title"><a href="#">Sunday Fleece Set</a></h3><p class="qv-sub">Hoodie and joggers</p></div><p class="qv-price">$96</p></div>
</li>
<li class="qv-card">
<div class="qv-media">
<img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&w=600&q=70" alt="Makeup brushes, lipsticks and a bronzer compact laid out on a beige background" width="600" height="600" loading="lazy">
<div class="qv-rail">
<button type="button" class="qv-btn is-icon qv-wish" aria-pressed="false" aria-label="Save Rose Brush and Palette Kit to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="qv-heart" d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
<button type="button" class="qv-btn is-icon is-compare qv-wish" aria-pressed="false" aria-label="Compare Rose Brush and Palette Kit"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4v16M17 4v16M3 8l4-4 4 4M13 16l4 4 4-4"/></svg></button>
<button type="button" class="qv-btn is-icon" aria-label="Add Rose Brush and Palette Kit to cart"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg></button>
</div>
</div>
<div class="qv-info"><div><h3 class="qv-title"><a href="#">Rose Brush and Palette Kit</a></h3><p class="qv-sub">9 pieces · vegan bristles</p></div><p class="qv-price">$58</p></div>
</li>
</ul></div>
CSS
/* Hover cards: the action bar (or icon rail) is hidden until the card is hovered OR anything inside it has
keyboard focus (:focus-within), and is always shown on touch screens (hover: none). Quick view is a native
<dialog> opened with showModal(), so it traps focus, closes with Esc and returns focus to the button. */
.qv,.qv-dialog{--qv-ink:#18181b;--qv-muted:#52525b;--qv-media:#e8e8ee;--qv-accent:#4338ca;--qv-accent-hover:#3730a3;--qv-heart:#be123c;--qv-star:#d97706;--qv-star-off:#d4d4d8;--qv-focus:#2563eb;}
.qv{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px 20px;list-style:none;margin:0;padding:0}
.qv-card{position:relative}
.qv-media{position:relative;aspect-ratio:1;border-radius:18px;background:var(--qv-media);overflow:hidden}
.qv-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.qv-card:hover .qv-media img{transform:scale(1.04)}
.qv-badge{position:absolute;top:12px;left:12px;padding:3px 10px;border-radius:999px;background:#fff;color:var(--qv-ink);font-size:.72rem;font-weight:700;letter-spacing:.04em}
.qv-actions{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s}
.qv-card:hover .qv-actions,.qv-card:focus-within .qv-actions{opacity:1;transform:none}
.qv-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 14px;border:0;border-radius:12px;background:#fff;color:var(--qv-ink);
font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(24,24,27,.16);transition:background-color .15s,color .15s}
.qv-btn:hover{background:var(--qv-ink);color:#fff}
.qv-btn.is-main{flex:1}
.qv-btn.is-icon{width:42px;padding:0}
.qv-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qv-btn[aria-pressed="true"]{color:var(--qv-heart)}
.qv-btn[aria-pressed="true"]:hover{color:#fff}
.qv-btn[aria-pressed="true"] .qv-heart{fill:currentColor}
.qv-btn.is-compare[aria-pressed="true"]{background:var(--qv-accent);color:#fff}
.qv-info{display:flex;justify-content:space-between;gap:12px;padding:14px 4px 0}
.qv-title{margin:0;font-size:.98rem;font-weight:600;line-height:1.35}
.qv-title a{color:var(--qv-ink);text-decoration:none}
.qv-title a:hover{text-decoration:underline;text-underline-offset:3px}
.qv-sub{margin:2px 0 0;font-size:.8rem;color:var(--qv-muted)}
.qv-price{margin:0;font-size:1rem;font-weight:700;white-space:nowrap}
/* Icon rail variant */
.qv-rail{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateX(10px);transition:opacity .2s,transform .2s}
.qv-card:hover .qv-rail,.qv-card:focus-within .qv-rail{opacity:1;transform:none}
@media (hover:none){.qv-actions,.qv-rail{opacity:1;transform:none}}
/* Quick view dialog */
.qv-dialog{width:min(760px,calc(100% - 32px));max-height:calc(100% - 32px);margin:auto;padding:0;border:0;border-radius:20px;background:#fff;color:var(--qv-ink);box-shadow:0 30px 80px -20px rgba(24,24,27,.45)}
.qv-dialog::backdrop{background:rgba(24,24,27,.55)}
.qv-dialog[open]{animation:qv-in .22s ease-out}
@keyframes qv-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
.qv-dialog-grid{display:grid;grid-template-columns:1fr}
.qv-dialog-grid>img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--qv-media)}
.qv-dialog-body{display:flex;flex-direction:column;gap:10px;padding:28px 26px 26px}
.qv-dialog h2{margin:0;padding-right:40px;font-size:1.4rem;line-height:1.25;letter-spacing:-.01em}
.qv-dialog .qv-price{font-size:1.3rem}
.qv-rating{display:flex;align-items:center;gap:6px;margin:0;font-size:.8rem;color:var(--qv-muted)}
.qv-stars{--r:5;font-size:.9rem;letter-spacing:1px;line-height:1;color:transparent;
background:linear-gradient(90deg,var(--qv-star) calc(var(--r) / 5 * 100%),var(--qv-star-off) 0);-webkit-background-clip:text;background-clip:text}
.qv-desc{margin:0;font-size:.9rem;color:var(--qv-muted)}
.qv-note{margin:0;font-size:.8rem;color:var(--qv-muted)}
.qv-add{margin-top:8px;padding:13px 18px;border:0;border-radius:12px;background:var(--qv-accent);color:#fff;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:background-color .15s}
.qv-add:hover{background:var(--qv-accent-hover)}
.qv-close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#f4f4f5;color:var(--qv-ink);cursor:pointer}
.qv-close:hover{background:#e4e4e7}
.qv-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (min-width:640px){.qv-dialog-grid{grid-template-columns:1fr 1fr}.qv-dialog-grid>img{height:100%;aspect-ratio:1}.qv-dialog-body{justify-content:center}}
:is(.qv,.qv-dialog) :is(a,button):focus-visible{outline:3px solid var(--qv-focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.qv-media img,.qv-actions,.qv-rail,.qv-btn,.qv-add{transition:none}.qv-card:hover .qv-media img{transform:none}.qv-dialog[open]{animation:none}}
JavaScript
// Quick view: each button opens its <dialog> as a modal; clicking the dim backdrop also closes it.
document.querySelectorAll('[data-quick-view]').forEach(btn => btn.addEventListener('click', () => {
document.getElementById(btn.dataset.quickView).showModal();
}));
document.querySelectorAll('.qv-dialog').forEach(dlg => dlg.addEventListener('click', e => { if (e.target === dlg) dlg.close(); }));
// Wishlist and compare are toggle buttons: flip aria-pressed on click.
document.querySelectorAll('.qv-wish').forEach(btn => btn.addEventListener('click', () => {
btn.setAttribute('aria-pressed', String(btn.getAttribute('aria-pressed') !== 'true'));
}));
/* Dialog entrance: a keyframe has no utility equivalent. */
@theme { --animate-qv-in: qv-in .22s ease-out; }
@keyframes qv-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
JavaScript
// Quick view: each button opens its <dialog> as a modal; clicking the dim backdrop also closes it.
document.querySelectorAll('[data-quick-view]').forEach(btn => btn.addEventListener('click', () => {
document.getElementById(btn.dataset.quickView).showModal();
}));
document.querySelectorAll('.qv-dialog').forEach(dlg => dlg.addEventListener('click', e => { if (e.target === dlg) dlg.close(); }));
// Wishlist and compare are toggle buttons: flip aria-pressed on click.
document.querySelectorAll('.qv-wish').forEach(btn => btn.addEventListener('click', () => {
btn.setAttribute('aria-pressed', String(btn.getAttribute('aria-pressed') !== 'true'));
}));
About this set
Product cards that keep the photo clean until the shopper shows interest, then reveal their actions. Action bar with quick view slides a white bar up over the photo with a Quick view button, an add to cart icon button and a wishlist heart. Quick view opens a modal with a larger photo, the rating, price, a short description, delivery terms and an Add to cart button, so a shopper can check a watch, headphones or a bag without leaving the grid. Icon rail slides a column of round buttons in from the right edge for wishlist, compare and add to cart, which suits fashion and beauty grids. The actions appear on hover and also whenever anything inside the card has keyboard focus, through :focus-within, so Tab reaches them without a mouse; on touch screens, which have no hover, they are always shown. The quick view is a native dialog opened with showModal(), which traps focus, closes with Esc or a click on the backdrop and returns focus to the button that opened it. The Bootstrap version uses its .modal and data-bs-toggle=”button”, and the Tailwind version uses group-hover:, group-focus-within: and backdrop: utilities.
What’s included
Action bar and icon rail that show on hover and on keyboard focus
Actions always visible on touch screens
Quick view in a native dialog or a Bootstrap .modal
Wishlist and compare toggles with aria-pressed
Gentle zoom on the photo that respects reduced motion
Accessibility
No action is hover-only: :focus-within reveals the bar or rail as soon as a button inside it is focused, and touch screens always show it. Icon buttons have names such as Add Linea Minimal Watch to cart and Compare Oxford Shirt Trio, and Quick view is named for its product. The dialog is labelled by the product name, traps focus, closes with Esc and returns focus to its trigger. Focus outlines are 3px, and the slide, zoom and dialog animations stop under prefers-reduced-motion.
Customise it
Change --qv-accent, --qv-heart, --qv-media and --qv-focus on .qv and .qv-dialog, and the width of .qv-dialog. In Bootstrap set --bs-modal-width on .qv-modal; in Tailwind edit the bg-[#4338ca] button and the w-[min(760px,…)] dialog width.
