# O estilo DiscoTOC está quebrado se não houver resposta no celular

**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:** [Fevereiro 22, 2025, 5:52pm 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:** 4

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [Julho 10, 2025, 12:38pm UTC](https://meta.discourse.org/t/discotoc-style-is-broken-if-there-is-no-reply-on-mobile/353845/4 "2025-07-10T12:38:57Z")

</div>

Olá 👋

Isso é ótimo, obrigado, mas acho que podemos fazer isso apenas com CSS também. 🤔 Nós apenas temos que usar o mesmo CSS em `.topic-navigation` que foi usado em `.with-topic-progress`. A classe `.with-topic-progress` ausente está bloqueando o estilo se não houver resposta no tópico.

Algo assim deve funcionar.

CSS para celular

```SCSS
// Navegação de Tópico Fixo
.container.posts .topic-navigation:not(.with-topic-progress) {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
  z-index: z("timeline");
  pointer-events: none; // o wrapper pode bloquear controles móveis
  
  > * {
    pointer-events: auto; // isso desativa a regra acima para que os elementos filhos sejam interativos
  }
  
  // Adicionar Estilo do TOC
  .d-toc-wrapper {
    position: fixed;
    margin-top: 0.25em;
    height: calc(100vh - 50px - var(--header-offset));
    opacity: 0.5;
    right: -100vw;
    top: var(--header-offset);
    width: 75vw;
    max-width: 350px;
    background-color: var(--secondary);
    box-shadow: var(--shadow-dropdown);
    z-index: z("modal", "overlay");
    transition: all 0.2s ease-in-out;

    .d-toc-main {
      width: 100%;
      padding: 0.5em;
      height: 100%;

      #d-toc {
        max-height: calc(100% - 3em);
      }
    }

    &.overlay {
      right: 0;
      width: 75vw;
      opacity: 1;

      .d-toc-main #d-toc li.d-toc-item ul {
        transition: none;
      }
    }

    a.scroll-to-bottom,
    a.d-toc-close {
      display: inline-block;
      padding: 0.5em;
    }

    .d-toc-icons {
      text-align: right;
    }
  }
}

// Suporte RTL
.rtl {
  .topic-navigation .d-toc-wrapper {
    right: unset;
    left: -100vw;

    &.overlay {
      right: unset;
      left: 0;
    }
  }
}

```

---

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