# 모바일에서 답글이 없으면 DiscoTOC 스타일이 깨집니다

**URL:** https://meta.discourse.org/t/discotoc-style-is-broken-if-there-is-no-reply-on-mobile/353845
**Category:** UX
**Tags:** mobile, disco-toc, fixed
**Created:** [2월 22, 2025, 5:52오후 UTC](https://meta.discourse.org/t/discotoc-style-is-broken-if-there-is-no-reply-on-mobile/353845 "2025-02-22T17:52:52Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [7월 9, 2025, 10:26오후 UTC](https://meta.discourse.org/t/discotoc-style-is-broken-if-there-is-no-reply-on-mobile/353845/3 "2025-07-09T22:26:50Z")

</div>

제 기본적인 코딩 실력과 ChatGPT와의 대화를 통해 작동하게 만든 것 같습니다.

커스텀 컴포넌트를 생성하고 CSS 탭에 다음을 넣었습니다:

```css
@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

```

그리고 JS 탭에는 다음을 넣었습니다

```javascript
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.onPageChange(() => {
    const observer = new MutationObserver(() => {
      const wrapper = document.getElementById("topic-progress-wrapper");
      const tocButton = wrapper?.querySelector(".d-toc-mini button");

      if (wrapper) {
        if (tocButton) {
          wrapper.classList.add("sticky-bottom");
        } else {
          wrapper.classList.remove("sticky-bottom");
        }
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });
});

```

답변이 없어도 이 방식이 잘 작동하는 것 같습니다.  
다시 한번 말하지만, 저는 전문가가 아닙니다. 저는 그저 좋은 "질문자"일 뿐이며, 적절한 질문과 도전으로 ChatGPT와 조금씩 "대화"를 나누니 작동하는 것 같습니다.

JavaScript와 CSS에 정통한 전문가가 이를 개선하고 싶으시다면, 공유해 주십시오.

* * *

원하시는 사항:

1. 아이콘 옆에 “목차” 텍스트 표시
2. 확장된 제목
3. 답변에 의존하지 않는 고정 버튼  
위 조건을 모두 충족하는 전체 CSS는 다음과 같습니다:

```css
/* 목차 사이드바의 모든 제목을 확장합니다 */
#d-toc li.d-toc-item > ul {
  max-height: 500em !important;
  overflow: visible !important;
  opacity: 1 !important;
}

@media screen and (max-width: 767px) {
    /* 목차 버튼을 포함한 래퍼를 하단에 고정(sticky)합니다 */
    #topic-progress-wrapper.sticky-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    /* 아이콘 뒤에 버튼에 "목차"를 추가합니다 */
    .d-toc-mini button::after {
        content: "Table of Contents";
        margin-left: 5px;
        font-size: 14px;
        vertical-align: middle;
    }
}

```

JavaScript는 변경 사항이 없습니다.

---

_[View the full topic](https://meta.discourse.org/t/discotoc-style-is-broken-if-there-is-no-reply-on-mobile/353845)._