[BUG] Docs | Side menu truncated on reduced widths

[teocns]

Describe the bug

Expected behavior

Additional context to reproduce

Zoom in and out on a tight window width

Screenshots

No response

Are you sure this issue hasn't been raised already?

• Yes

Have you read the Code of Conduct?

• Yes

[welcome]

Thank you for opening your first issue here! 🛠

[dosubot]

Hey @teocns! Great to see you back 🚀! Ran into another quirky adventure on the Flyte docs site, huh? Let's dive into this together!

Thank you for bringing this to our attention. It seems like the sidebar's responsiveness could indeed be improved to accommodate various screen sizes and zoom levels. Here are some suggestions on how to address this issue:

1. Responsive Sidebar Width: Adjust the sidebar width based on the viewport width to ensure it remains accessible on smaller screens. This can be achieved by adding media queries in the CSS file. Here's an example:

@media only screen and (max-width: 1199px) {
  .sidebar-drawer {
    width: 16em; /* Adjust the width as needed for smaller screens */
  }
}

@media only screen and (max-width: 768px) {
  .sidebar-drawer {
    width: 12em; /* Further adjust for even smaller screens */
  }
}

2. Sidebar Visibility on Zoom: To ensure the sidebar remains visible when users zoom in, consider adding a control to toggle the sidebar visibility. This requires a combination of CSS for styling and JavaScript for functionality. Here's an example:

/* Add a button to toggle the sidebar visibility */
.sidebar-toggle-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1001; /* Ensure it's above other content */
  cursor: pointer;
  background-color: #9d68e4; /* Match the theme */
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
}

/* Style to hide the sidebar */
.sidebar-hidden .sidebar-drawer {
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

/* Ensure content area expands to fill the space */
.sidebar-hidden .content-area {
  margin-left: 0;
}

And the JavaScript to toggle the sidebar visibility:

document.addEventListener('DOMContentLoaded', function() {
  const toggleBtn = document.createElement('button');
  toggleBtn.classList.add('sidebar-toggle-btn');
  toggleBtn.textContent = 'Toggle Sidebar';
  
  toggleBtn.addEventListener('click', function() {
    document.body.classList.toggle('sidebar-hidden');
  });
  
  document.body.appendChild(toggleBtn);
});

3. Improve Sidebar Scrollability: Ensure the sidebar is easily scrollable on devices with smaller screens or when zoomed in. This can be achieved by adding the following CSS:

.sidebar-drawer {
  overflow-y: auto; /* Allows scrolling */
  height: 100vh; /* Full viewport height */
}

These changes aim to make the sidebar more responsive and accessible across a range of devices and zoom levels. Adjust the specific values (e.g., widths, colors) as needed to match the Flyte documentation site's design and layout preferences.

Please note that these changes should be made in the docs/_static/flyte.css file.

I hope this helps! If you have any further questions or need additional clarification, please don't hesitate to ask.

Sources

• docs/_static/flyte.css

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[kumare3]

Dosubot seems to make sense!?

[vickywane]

Hello @davidmirror-ops ,

I'd love to try out Dosubot's recommendations on fixing this 😅

[davidmirror-ops]

@vickywane great! Please let us know soon if you have questions. Thanks

[AdeshGhadage]

@vickywane I've tried resizing the window and zooming in and out, but I'm not experiencing the behavior described in the issue. Could you please provide more specific details or steps to reproduce the problem? It would be helpful to know if this happens under certain conditions, such as specific screen resolutions or browser types.