feat(web): 宽屏样式优化 (#131)

[linshenkx]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
prompt-optimizer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 22, 2025 5:56am

[cursor]

Bug: CSS Class Conflicts Cause Layout Breaks

The commit introduces conflicting CSS classes leading to layout issues. The container and min-w-full classes are used together on both the header and main elements, creating contradictory width constraints where min-w-full (100% width) overrides the responsive max-width set by container, rendering it ineffective. Additionally, in the header, the combination of min-w-full and mx-4 causes horizontal overflow on small screens due to the added margins. Furthermore, the header's mx-4 sm:mx-auto and the main content's mx-auto result in inconsistent horizontal margins and misalignment between them on small screens.

packages/ui/src/components/MainLayout.vue#L4-L17

prompt-optimizer/packages/ui/src/components/MainLayout.vue

Lines 4 to 17 in b3bf849

	<header class="theme-header flex-none">
	<div class="container min-w-full mx-4 sm:mx-auto px-2 sm:px-4 py-2 sm:py-3 flex justify-between items-center">
	<h1 class="text-lg sm:text-xl font-bold theme-title flex items-center gap-2">
	<img src="../assets/logo.jpg" alt="Logo" class="h-8 w-8 rounded-lg" />
	<slot name="title">{{ t('common.appName') }}</slot>
	</h1>
	<div class="flex items-center gap-1 sm:gap-3">
	<slot name="actions"></slot>
	</div>
	</div>
	</header>
	<!-- 主要内容区域 -->
	<main class="flex-1 min-h-0 min-w-full container mx-auto p-2 sm:p-4">

Fix in Cursor • Fix in Web

---

BugBot free trial expires on July 29, 2025
Learn more in the Cursor dashboard.

Was this report helpful? Give feedback by reacting with 👍 or 👎