fix(toc): حذف نوار اسکرول فهرست مطالب و پهن‌کردن ستون آن

- ستون فهرست در دسکتاپ از ۱۷rem به ۲۱rem پهن‌تر شد تا تیترهای بلند جا شوند
- نوار اسکرول بومی مرورگر (با فلش) مخفی شد؛ اسکرول با چرخ ماوس/لمس سر جایش است
This commit is contained in:
aramesh-site deploy
2026-09-28 11:06:51 +00:00
parent 182a1bb674
commit 18e226ad47
3 changed files with 11 additions and 2 deletions
+1 -1
View File
@@ -110,7 +110,7 @@ export function TableOfContents({ items, title = 'فهرست مطالب', classN
</p> </p>
<div className="mt-5 h-px w-12 bg-copper/50" aria-hidden="true" /> <div className="mt-5 h-px w-12 bg-copper/50" aria-hidden="true" />
{/* ارتفاع فهرست به ارتفاع در دسترس صفحه (زیر نوار چسبان) محدود می‌شود تا بریده نشود */} {/* ارتفاع فهرست به ارتفاع در دسترس صفحه (زیر نوار چسبان) محدود می‌شود تا بریده نشود */}
<ul className="mt-4 max-h-[60vh] space-y-0.5 overflow-y-auto border-s border-ivory/10 ps-3 lg:max-h-[calc(100vh_-_15rem)]"> <ul className="no-scrollbar mt-4 max-h-[60vh] space-y-0.5 overflow-y-auto border-s border-ivory/10 ps-3 lg:max-h-[calc(100vh_-_15rem)]">
{items.map((item) => { {items.map((item) => {
const isActive = item.id === activeId const isActive = item.id === activeId
return ( return (
+9
View File
@@ -256,6 +256,15 @@ html[lang='en'] .article-body h3 {
border: 1px solid rgba(245, 243, 239, 0.1); border: 1px solid rgba(245, 243, 239, 0.1);
object-fit: cover; object-fit: cover;
} }
/* فهرست مطالب: اسکرول بدون نوار اسکرول — چرخ ماوس و لمس کار می‌کنند */
.no-scrollbar {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge legacy */
}
.no-scrollbar::-webkit-scrollbar {
display: none; /* Chrome / Safari / Edge */
}
/* ---------- تصویر کپشن‌دار: <figure><img><figcaption> ---------- */ /* ---------- تصویر کپشن‌دار: <figure><img><figcaption> ---------- */
.article-body figure { .article-body figure {
margin-top: 2rem; margin-top: 2rem;
+1 -1
View File
@@ -92,7 +92,7 @@ export function ArticleDetail() {
*/ */
const hasToc = toc.length > 0; const hasToc = toc.length > 0;
// در چیدمان راست‌به‌چپ ستون شماره ۱ سمت راست است؛ پس ستون‌ها صریح شماره می‌خورند // در چیدمان راست‌به‌چپ ستون شماره ۱ سمت راست است؛ پس ستون‌ها صریح شماره می‌خورند
const gridColumns = hasToc ? 'lg:grid-cols-[17rem_minmax(0,1fr)]' : ''; const gridColumns = hasToc ? 'lg:grid-cols-[21rem_minmax(0,1fr)]' : '';
const bodyColumns = 'lg:col-start-2'; const bodyColumns = 'lg:col-start-2';
const tocColumns = 'lg:col-start-1'; const tocColumns = 'lg:col-start-1';