How can I make blog categories appear vertically on mobile in grid layout?

[MissionSimplify]

Hello,

I am struggling with a blog in the Label Theme. 

The blog is setup no problem and I am using a Grid Layout

When on mobile all the grid categories are horizontal across the top and you have to slide on your phone to see them.

I tried to add some custom CSS code but that didn't seem to solve my problem.

/* Media query for screens with a maximum width of 767px (typical mobile screens) */
@media screen and (max-width: 767px) {
  .pb-8 nav ul.flex.lg\:flex-wrap.lg\:justify-start.-mx-2.lg\:-mx-4 {
    display: block; /* Vertical layout for mobile */
  }

  .pb-8 nav ul.flex.lg\:flex-wrap.lg\:justify-start.-mx-2.lg\:-mx-4 li {
    margin-right: 0; /* Remove right margin for vertical layout */
    margin-bottom: 5px; /* Add bottom margin to separate categories vertically */
  }
}

I also tried to look at the liquid for the sidebar and change that but I think this liquid only helps if i have it as list with sidebar and not grid.

<div class="lg:col-span-3 lg:col-end-13 space-y-8" data-color-scheme="primary">
  <div>
    <h2 class="font-secondary border-b-theme-width border-scheme-border pb-2">{{ 'blogs.sidebar.recent_articles' | t }}</h2>
    <ul class="mt-4 mb-8">
      {% for article in blogs[blog.handle].articles limit: 6 %}
        <li class="mt-3">
          <a href="{{ article.url }}" class="block hover:text-scheme-text">{{ article.title }}</a>
          <time class="text-scheme-meta text-sm mt-2" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>
        </li>
      {% endfor %}
    </ul>
  </div>
  {% if blog.all_tags.size > 0 %}
  <div>
    <h2 class="font-secondary border-b-theme-width border-scheme-border pb-2">{{ 'blogs.sidebar.categories' | t }}</h2>
    <ul class="mt-4 mb-8">
      {% if current_tags %}
        <li>
          <a class="border-b-text-width border-transparent inline-block py-1" href='{{ blogs[blog.handle].url }}'>{{ 'blogs.sidebar.all_tags' | t }}</a>
        </li>
      {% else %}
        <li>
          <span class="border-b-text-width border-scheme-text inline-block py-1">
            {{ 'blogs.sidebar.all_tags' | t }}
          </span>
        </li>
      {% endif %}
      {% for tag in blog.all_tags %}
        {% if current_tags contains tag %}
          <li>
            <span class="py-1 inline-block hover:text-scheme-accent border-b-text-width border-scheme-text">{{ tag }}</span>
          </li>
        {% else %}
          <li>{{ tag | link_to_tag: tag | replace: 'title=', 'class="py-1 inline-block hover:text-scheme-accent border-b-text-width border-transparent" title=' }}</li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
  {% endif %}

  <p>
    <a class="font-secondary text-scheme-meta text-sm" href="{{ shop.url }}{{ blogs[blog.handle].url }}.atom" target="_blank">{{ 'blogs.sidebar.rss' | t }}</a>
  </p>
</div>

If anyone has any ideas how I can get the blog categories when in grid to appear as a vertical list instead of the horizontal scroll that would be a huge help.