fix: 월 네비 가운데 유지·액션 우측 정렬 + 검색 모달 버튼 넘침 수정
- 가계부/예산 month-nav: 좌 spacer + 우 mn-actions(flex:1)로 네비 중앙 고정, 추가/검색·필터 버튼 우측 정렬 - 커뮤니티 검색 모달: input min-width:0 + select/버튼 flex:none 으로 검색 아이콘이 모달 밖으로 밀리는 문제 해결 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -848,14 +848,17 @@ onMounted(async () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="month-nav">
|
<div class="month-nav">
|
||||||
|
<span class="mn-spacer"></span>
|
||||||
<IconBtn icon="chevronLeft" title="이전 달" size="sm" @click="prevMonth" />
|
<IconBtn icon="chevronLeft" title="이전 달" size="sm" @click="prevMonth" />
|
||||||
<span class="period">{{ periodLabel }}</span>
|
<span class="period">{{ periodLabel }}</span>
|
||||||
<IconBtn icon="chevronRight" title="다음 달" size="sm" @click="nextMonth" />
|
<IconBtn icon="chevronRight" title="다음 달" size="sm" @click="nextMonth" />
|
||||||
<IconBtn
|
<div class="mn-actions">
|
||||||
icon="filter" title="검색·필터" class="filter-toggle"
|
<IconBtn
|
||||||
:variant="hasFilter ? 'primary' : 'default'" @click="filterOpen = !filterOpen"
|
icon="filter" title="검색·필터" class="filter-toggle"
|
||||||
/>
|
:variant="hasFilter ? 'primary' : 'default'" @click="filterOpen = !filterOpen"
|
||||||
<IconBtn icon="plus" title="내역 추가" variant="primary" @click="openCreate" />
|
/>
|
||||||
|
<IconBtn icon="plus" title="내역 추가" variant="primary" @click="openCreate" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="filterOpen" class="filter-bar">
|
<div v-if="filterOpen" class="filter-bar">
|
||||||
@@ -1265,6 +1268,16 @@ button.primary {
|
|||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
/* 좌측 spacer + 우측 액션을 같은 flex:1 로 둬서 가운데 네비를 정확히 중앙 유지 */
|
||||||
|
.mn-spacer {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.mn-actions {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
.period {
|
.period {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|||||||
@@ -243,10 +243,13 @@ onMounted(() => {
|
|||||||
<template>
|
<template>
|
||||||
<section class="budget">
|
<section class="budget">
|
||||||
<div class="month-nav">
|
<div class="month-nav">
|
||||||
|
<span class="mn-spacer"></span>
|
||||||
<IconBtn icon="chevronLeft" title="이전 달" size="sm" @click="prevMonth" />
|
<IconBtn icon="chevronLeft" title="이전 달" size="sm" @click="prevMonth" />
|
||||||
<span class="period">{{ periodLabel }}</span>
|
<span class="period">{{ periodLabel }}</span>
|
||||||
<IconBtn icon="chevronRight" title="다음 달" size="sm" @click="nextMonth" />
|
<IconBtn icon="chevronRight" title="다음 달" size="sm" @click="nextMonth" />
|
||||||
<IconBtn icon="plus" title="예산 추가" variant="primary" @click="openCreate" />
|
<div class="mn-actions">
|
||||||
|
<IconBtn icon="plus" title="예산 추가" variant="primary" @click="openCreate" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 월 예상 수입 vs 총 예산 -->
|
<!-- 월 예상 수입 vs 총 예산 -->
|
||||||
@@ -412,6 +415,15 @@ button.primary {
|
|||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
.mn-spacer {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.mn-actions {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
.period {
|
.period {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|||||||
@@ -412,14 +412,19 @@ button:disabled {
|
|||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
.search-type {
|
.search-type {
|
||||||
|
flex: none;
|
||||||
padding: 0.5rem 0.6rem;
|
padding: 0.5rem 0.6rem;
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: var(--color-background-soft);
|
background: var(--color-background-soft);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
.search-form > .icon-btn {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
.search-form input {
|
.search-form input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 0; /* flex 자식이 내용 최소폭 아래로 줄어들 수 있게 — 검색 버튼이 모달 밖으로 밀리는 문제 방지 */
|
||||||
padding: 0.5rem 0.7rem;
|
padding: 0.5rem 0.7rem;
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|||||||
Reference in New Issue
Block a user