stretched sidebar

[skyth3r]

After the latest code fix to correct #27, a new issue was introduced that caused the sidebar to stretch across the page. The sidebar width also differs between the articles page and all other pages.

I've attempted to fix this myself on my own branch here but I'm getting mixed results (I'm not good at CSS 😅 )

Here is what I see without any of my modifications after updating the theme submodule 👇

Any chance you know how to fix this @apvarun?

[AlisaKobzar]

I have the same issue. :(

[techmagus]

Hi @skyth3r, could you try this branch: https://github.com/techmagus/hugo-theme-digital-garden/tree/27-28

I can't test it in your smartphone model, but I just realised, by reverting commit adaf612, it will reintroduce #27. It looks okay on my end, but I guess the issue is with Safari/WebKit.

For #28, what I did was to target the syntax highlighter. I added this in the head.html file:

  <style>
    div.highlight table.lntable {
      overflow-x: scroll;
      display: block;
    }
  </style>

I'm new to this theme, and I'm still grasping the inner workings of it. Originally, I was trying to find a workaround for #28 without reverting #27, while it worked, the sidebar width differs between articles (list and single) compared to the rest of the pages.

(I'll find another workaround if #27 is back.)

Anyhow, here are some screenshots:

[skyth3r]

Ooo, thanks for this @techmagus! I'll have a play around with it this weekend when I have a free moment

[skyth3r]

@techmagus just tried out your change but couldn't get it working 😅

I think for now I might just remove my code blocks from my article for now and add them back once this is fixed

[Michael-OvO]

I have the same problem here. added the HTML code but still doesn't seem to fix the side bar problem.

[methodtomymadnessdev]

I have the same issue when running npm run dev however on npm run build the sidebar issue doesn't exist. So for dev, I fixed it by changing the dev script in package.json to

npm run build:css && hugo serve -wD