Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A "fixed" Table of contents aside wastes space #334

Open
adelton opened this issue Oct 30, 2023 · 8 comments
Open

A "fixed" Table of contents aside wastes space #334

adelton opened this issue Oct 30, 2023 · 8 comments
Assignees

Comments

@adelton
Copy link
Contributor

adelton commented Oct 30, 2023

The pattern pages like https://validatedpatterns.io/patterns/industrial-edge/ seem to contain

<aside class="pf-c-jump-links pf-m-vertical sticky pf-m-expandable pf-m-non-expandable-on-2xl" aria-label="Table of contents"> ...

on the right which is empty and wastes space.

Screenshot_2023-10-30_13-09-01

Moreover, when one tries to increase the size of the text with Ctrl-+, that white space grows and wastes even more space.

Screenshot_2023-10-30_13-09-22

It should be turned to float or removed completely.

@adelton
Copy link
Contributor Author

adelton commented Oct 30, 2023

Note to self -- the following Violentmonkey script workarounds the problem:

// ==UserScript==
// @name        Workaround https://github.com/validatedpatterns/docs/issues/334
// @namespace   adelton
// @match       https://validatedpatterns.io/patterns/*
// @grant       none
// @version     1.0

// ==/UserScript==

var TOC = document.getElementById('TableOfContents');
if (TOC) {
  TOC.parentNode.style.display = 'none';
}

@mbaldessari
Copy link
Contributor

@abhatt-rh can you take a look at this?

@abhatt-rh
Copy link
Collaborator

@abhatt-rh can you take a look at this?

Thank you @mbaldessari, but I think @danmacpherson would be the best to consult on the PatternFly front so assigning this one to him.

@abhatt-rh abhatt-rh assigned danmacpherson and unassigned abhatt-rh Nov 6, 2023
@danmacpherson
Copy link
Collaborator

Hi @adelton

So that column should not be empty and should have table of contents for the page. For example:

image

I might need some help to replicate this issue so I can work out the right way to fix it. Can you let me know the following:

  • Your browser and browser version
  • Any browser extensions installed
  • Your screen resolution
  • Your operating system

@adelton
Copy link
Contributor Author

adelton commented Nov 13, 2023

  • firefox-119.0-2.fc39.x86_64
  • multiple but you can assume none because I can see the same issue in a private window as well where extensions are disabled
  • 1920 x 1080
  • Fedora 39

@danmacpherson
Copy link
Collaborator

Thanks, @adelton. The good news is I'm running the exact same configuration you are, so it might be easier to isolate the issue.

I have a feeling the page zoom is affecting the TOC column, so I might need to correct this. Just to confirm, do you usually have the pages in Firefox zoomed in? If you click View > Zoom > Actual Size or Zoom Out, does the menu reappear?

@adelton
Copy link
Contributor Author

adelton commented Nov 13, 2023

Yes, after zooming out to a point when the text is so small I cannot really read it, the menu appears.
Screenshot_2023-11-13_17-04-21

@danmacpherson
Copy link
Collaborator

Excellent! Seems like we've got the root cause. I'll try and implement a fix to make that right column respect the zoom.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants