القائمة
Fix scrollable content inside flex containers. Use when a list or content area is not scrollable, or when overflow-y-auto does not work inside a flex layout.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | desqta-flex-scroll-fix |
| description | Fix scrollable content inside flex containers. Use when a list or content area is not scrollable, or when overflow-y-auto does not work inside a flex layout. |
When content inside a flex container should scroll but doesn't, the parent chain is usually wrong.
overflow-y-auto but doesn't scrollflex-none so child sizes to content and never gets a constrained heightflex flex-col min-h-0 overflow-hidden
min-h-0 lets the flex child shrink below its content heightoverflow-hidden constrains the scroll to the inner elementflex-1 min-h-0 overflow-y-auto
flex-1 – grow to fill parentmin-h-0 – allow shrinking (critical for scroll)overflow-y-auto – scroll when content overflows<!-- BAD: flex-none prevents scroll -->
<section class="flex-none min-h-0 ...">
<div class="overflow-y-auto flex-1 min-h-0">...</div>
</section>
<!-- GOOD: flex-1 lets section fill parent -->
<section class="flex-1 min-h-0 overflow-hidden ...">
<div class="overflow-y-auto flex-1 min-h-0">...</div>
</section>
src/routes/direqt-messages/components/MessageList.svelte – Changed embedded mode from flex-none to flex-1 min-h-0 overflow-hidden to fix message list scrollUse the analytics-style custom dropdown instead of Select components for consistency. Use when adding dropdowns, label selectors, or filter pickers that should match the analytics page styling.
Apply soft, rounded mobile UI styling for a native feel. Use when improving mobile layout, bottom nav, header, safe areas, or when the user asks for mobile UI to be less square and more rounded.
Redesign DesQTA pages to match the consistent layout and styling used on courses, directory, and analytics. Use when redesigning a page, making pages look consistent, or when the user asks for page layout updates to match other pages.
Add new settings to the Rust backend so they persist. Use when adding a new setting, config option, or when settings are not saving correctly.
Add new sidebar customization features like hiding pages, reordering, or folders. Use when extending the Customize Sidebar dialog, adding menu visibility toggles, or modifying sidebar behavior.
Apply soft, organic, and premium UI patterns to create a refined user experience. Use when styling data visualizations, page layouts, article content, RSS feeds, semi-transparent panels, or when the user asks for a soft, rich, premium, or meticulously designed feel.