fix(web): keep jalali day cells inside calendar panel

This commit is contained in:
2026-10-25 10:05:16 +03:30
parent 48815852fc
commit 546a7a7e46
+32 -14
View File
@@ -867,10 +867,11 @@ onBeforeUnmount(() => {
.panel {
position: fixed;
z-index: 120;
box-sizing: border-box;
width: min(20.5rem, calc(100vw - 16px));
/* تقویم باید یکجا دیده شود؛ اسکرول داخل پنل گیج‌کننده است */
max-height: none;
overflow: visible;
overflow: hidden;
background: #fff;
border-radius: var(--radius);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
@@ -921,19 +922,22 @@ onBeforeUnmount(() => {
padding: 0.25rem 0;
}
.pick-cell {
height: 44px;
.panel :deep(.pick-cell.ant-btn) {
width: 100% !important;
min-width: 0 !important;
height: 44px !important;
padding-inline: 0 !important;
border-radius: var(--radius);
color: #0f172a;
font-size: 0.85rem;
}
.pick-cell.today {
.panel :deep(.pick-cell.today) {
box-shadow: inset 0 0 0 1px #99f6e4;
}
.pick-cell.on,
.pick-cell:hover {
.panel :deep(.pick-cell.on),
.panel :deep(.pick-cell.ant-btn:hover) {
background: #0d9488;
color: #fff;
}
@@ -957,8 +961,10 @@ onBeforeUnmount(() => {
.week,
.grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.15rem;
width: 100%;
min-width: 0;
}
.week span {
@@ -968,31 +974,43 @@ onBeforeUnmount(() => {
padding-bottom: 0.25rem;
}
.day {
height: 34px;
.panel :deep(.day.ant-btn) {
width: 100% !important;
min-width: 0 !important;
height: 34px !important;
padding: 0 !important;
border: 0;
border-radius: var(--radius);
background: none;
color: #0f172a;
font: inherit;
font-size: 0.82rem;
line-height: 1;
cursor: pointer;
}
.day.mute {
.panel :deep(.day.ant-btn > span) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
}
.panel :deep(.day.mute) {
color: #cbd5e1;
}
.day.today {
.panel :deep(.day.today) {
box-shadow: inset 0 0 0 1px #99f6e4;
}
.day.on,
.day:hover {
.panel :deep(.day.on),
.panel :deep(.day.ant-btn:hover) {
background: #0d9488;
color: #fff;
}
.day.mute:hover {
.panel :deep(.day.mute:hover) {
background: #f1f5f9;
color: #64748b;
}