There are many variations for mobile (multiple OS, browsers and screen sizes).
I will try your suggestion and test again.
@TheME
Your suggestion (changing max(195px, 100vh - 240px) to max(195px, 100vh - 140px)) will increase the height of the <pre> element in 100px, requiring more scroll.
I updated the branch to use different CSS units and account for the address bars and UI elements.
Can you please test the new code to see if the results are better?
TheME
December 1, 2023, 9:22am
23
Now it works fine for me, thanks
Do you may also have an idea how to fix the too short red line (emerging on small screens)?
TheME:
I saw the same issue, but I'm not sure if this is possible only with CSS (maybe, maybe not).
I will investigate this when I got time.
DL6ER
December 2, 2023, 5:19pm
25
So, jetzt auch in development-v6 enthalten - die Frage mit der roten Linie ist bislang unbeantwortet. Wir erstellen im Code einen rote Linie, die keine feste Länge hat = über die gesamte Länge gehen sollte (leider Konjunktiv). Dass die Browser "die gesamte Länge" als "was der Nutzer gerade jetzt sieht" interpretiert ist zumindest spannend finde ich. Wir schauen uns weiter nach einer Lösung um, ich weiß aber noch nicht wie/ob es was werden wird.
I think I found a solution (apparently there are no bad side effects) .
Adding display: grid to the parent element (#output ) and adding width: 100% to the <hr> works as expected. I will open a PR.
EDIT:
PR created. Tests are welcome.
development-v6 ← fix/red_line_width
opened 11:07PM - 02 Dec 23 UTC
### What does this PR aim to accomplish?
As title says.
Fix the [issue repor… ted on Discourse](https://discourse.pi-hole.net/t/verschiedene-fragen-zur-beta-6-und-3-vorschlage/66600/23?u=rdwebdesign).
### How does this PR accomplish the above?
CSS changes:
- use `display:grid` on the parent;
- set `width:100%` on the line element;
- set margin-bottom to `-1px`, to avoid a small jump when the line is hidden
Use `<div>` instead of `<span>` for each log entry.
---
**By submitting this pull request, I confirm the following:**
1. I have read and understood the [contributors guide](https://docs.pi-hole.net/guides/github/contributing/), as well as this entire template. I understand which branch to base my commits and Pull Requests against.
2. I have commented my proposed changes within the code and I have tested my changes.
3. I am willing to help maintain this change if there are issues with it later.
4. It is compatible with the [EUPL 1.2 license](https://opensource.org/licenses/EUPL-1.1)
5. I have squashed any insignificant commits. ([`git rebase`](http://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html))
6. I have checked that another pull request for this purpose does not exist.
7. I have considered, and confirmed that this submission will be valuable to others.
8. I accept that this submission may not be used, and the pull request closed at the will of the maintainer.
9. I give this submission freely, and claim no ownership to its content.
---
- [x] I have read the above and my PR is ready for review. *Check this box to confirm*
TheME
December 4, 2023, 6:45pm
27
This makes the red line width work as expected.
But then every second line is left blank.
Looks like with display: grid there is no need for <br> between the <span> elements.
development-v6
fix/red_line_width
Thanks.
The most strange part - this doesn't happen in Firefox:
