Top bar and Header Columns Render Inproperly

[Negative-light]

What happened?

Please take a look at the image above for visuals, but on an Ultrawide monitor (3440x1440) the top bar doesn't reach to the end of the page. But more importantly, the column headings do not align with the wide table row (this becomes additive so on long rows the table is not very useful)

What did you expect to happen?

For the top bar, I expect it to be the width of the page.

How can we reproduce it (as minimally and precisely as possible)?

Videos Database.csv I have uploaded a CSV of all relevant data and more data can be provided as needed.

Anything else we need to know?

1. Please let me know if this needs to be split in two (for the top bar and the column headers).
2. I use the AnuPpunccin theme with style settings, but this still persists in not using either feature set.

Plugin version

1.17.3

Obsidian version

1.4.13

OS

Windows

[yoghurtdewdew]

Yes, it happened to be like this.

[Acylation]

the column headings do not align with the wide table row

I made some change to the top-left cell, to style it just like other row headers. Hope this will solve the aligning problem. You will be able to test it in the next release.

the top bar doesn't reach to the end of the page

Sorry but I can't access an ultrawide monitor for debugging. Could someone try adjust some style declarations from the console? I'll add the solution back to the source code base on your testing.

The detailed steps are

• Open the console (Ctrl + Shift + i)
• Navigate to Elements
• In console area, press Ctrl + Shift + C to enter element select mode
• In the plugin pane, hover on elements to see the styling details, and click on a desired element to highlight it out in html

Once you select the plugin toolbar / view toolbar, you can add some styling to it. You can try add something like width: auto or width: 100% to see if the toolbar stretches to the end of your screen.

[Negative-light]

Ok that worked, but I also had to disable all "max-width" CSS values.

[Acylation]

It seems the max-width styles are introduced by some plugin. You can click on the grey <style> at the right of each styling group to reveal the <style> node in html. Copy / screenshot for that is pretty appreciated.

To narrow the problem, you can try the width: auto fix in a new vault with only Projects enabled to see if it really works. Or to fix this specific case, we could override the max-width with none or -webkit-fill-available.

[Negative-light]

Ok, I found the guilty plugin. Time Ruler. Had to dive into the CSS a bit, but after disabling it and setting the width to auto everything seemed to be working better.

[Acylation]

Thanks for your effort! I’ll soon PR for this and hopefully it will come out in the next release.

[Negative-light]

Awesome and thank you for helping! Really love the project has been very helpful

[ksdavidc]

This is still a problem if enough fields are selected. I have found the following css snippet fixes it, but it may break other things. I posted an issue with Time Ruler to see if it can be modified on their end, as I can't see the utility of the original max-width css there.

.projects-container .container {
  width: 100%;
}
@media (min-width: 640px) {
.projects-container  .container {
max-width: unset;
  }
}
@media (min-width: 768px) {
.projects-container  .container {
max-width: unset;
  }
}
@media (min-width: 1024px) {
.projects-container   .container {
max-width: unset;
  }
}
@media (min-width: 1280px) {
.projects-container   .container {
max-width: unset;
  }
}
@media (min-width: 1536px) {
.projects-container  .container {
max-width: unset;
  }
}