Why is the text next to the icon in my sidebar nav list moving to the next line when the sidebar is minimized?

I am having trouble with my sidebar functionality. Whenever I click the sidebar-toggle button the text of the <li><a href="#"><i class="fa-regular fa-address-book"></i> Contacts</a></li> element moves to the next line even though I have overflow-y: hidden; in my stylesheet. Can anyone point out what I'm missing. much appreciated!

HTML

<body>
    <div id="wrapper">
      <!-- Sidebar -->
      <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
          <li>
            <a href="#"><i class="fa-regular fa-address-book"></i> Contacts</a>
          </li>

          <li>
            <a href="#" class="btn btn-success" id="sidebar-toggle">
            <i class="fa-solid fa-angle-left"></i>
            </a>
          </li>
        </ul>
      </div>
      <!-- Page Content -->
      <div id="page-content-wrapper">
        <!-- Bootstrap container -->
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-12">
              <h1>TEST CONTENT</h1>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- JQuery -->
    <script
      src="https://code.jquery.com/jquery-3.6.3.min.js"
      integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
      crossorigin="anonymous">
    </script>
    <!-- Popper JS -->
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
      integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
      crossorigin="anonymous"
    </script>

    <!-- Bootstrap JS -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
      integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
      crossorigin="anonymous">
    </script>

    <!-- Side-bar toggle script -->
    <script>
      $("#sidebar-toggle").click(function (e) {
        console.log("Hello");
        e.preventDefault();
        $("#wrapper").toggleClass("side-bar-minimized");
        $("#sidebar-toggle i").toggleClass("fa-angle-left fa-angle-right");
      });
    </script>
  </body>

CSS

#sidebar-wrapper {
  z-index: 1;
  position: absolute;
  width: 190px;
  height: 100%;
  background: #2c3e50;
  overflow-y: hidden;
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding-left: 190px;
}

#wrapper.side-bar-minimized #sidebar-wrapper {
  width: 50px;
}

#wrapper.side-bar-minimized #page-content-wrapper {
  padding-left: 50px;
}

.sidebar-nav {
  padding: 0;
  list-style: none;
}

.sidebar-nav li {
  text-indent: 8px;
  line-height: 40px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #ddd;
}

.sidebar-nav li a:hover {
  background: #16a085;
}

I have tried splitting the li items into separate elements, fiddled with the css but cannot figure it out.

Solution

Simplest way to solve your problem, is to hide that text on minimized sidebar. First wrap that text with span, and then add class to hide that span on minimized.

<a href="#"><i class="fa fa-address-book"></i> <span>Contacts</span></a>

Then add this to css

  #wrapper.side-bar-minimized .sidebar-nav li a > span {
display: none;  }

">" in css is pseudo class, it targets first level child. And use more classes in html for css instead of id's.