UI render of bottom "bar" has white overlap #1449

ygaeon · 2021-05-23T05:23:29Z

Describe the bug

The bottom bar is overlapped by a white box, hiding half the bar. I've attached a screenshot of this.

Edit: Seems to be an information bar as it says Finished loading .... But it still overlaps and never disappear.

Precise recipe to reproduce the issue

No steps, it's there upon starting.

Information

OS name+version: Arch Linux x86_64, 5.11.15-arch1-2
Graphics card and driver: nvidia 465.24.02-3
Desktop environment / Window manager name+version: i3-gaps 4.19.1-1
How you installed Nyxt (Guix pack, package manager, build from source): https://aur.archlinux.org/packages/nyxt + http://ix.io/3nub 2.0.0 patch
Information from command copy-system-information:

If you can't run copy-system-information, try nyxt --system-information from
a shell. It this still does not work, please provide the following:
- Nyxt version (from =M-x nyxt-version= or =nyxt --version=): 2.0.0
- Lisp implementation/version (if built from source): SBCL 2.1.1
- Kernel name+version: (see above)
- WebKitGTK+ | QtWebEngine version: (don't know)

Output when started from a shell

<INFO> [06:55:23] Listening to socket "/run/user/1000/nyxt/nyxt.socket".
Nyxt version 2.0.0
<INFO> [06:55:23] Loading Lisp file "/home/<user>/.config/nyxt/auto-config.lisp".
<INFO> [07:10:37] Loading history of 2 URLs from "/home/<user>/.local/share/nyxt/history/default.lisp".
<INFO> [07:10:37] Loading "https://github.com/atlas-engineer/nyxt/issues".
<INFO> [07:10:38] Finished loading "https://github.com/atlas-engineer/nyxt/issues".
<WARN> [07:10:39] Warning: Error on GTK thead: NIL fell through ETYPECASE expression.
                    Wanted one of (GDK:GDK-EVENT-BUTTON GDK:GDK-EVENT-KEY
                                   GDK:GDK-EVENT-SCROLL).

(nyxt:571296): Gdk-WARNING **: 07:11:16.279: Event with type 8 not holding a GdkDevice. It is most likely synthesized outside Gdk/GTK+

The text was updated successfully, but these errors were encountered:

surrealreverie · 2021-05-27T09:53:52Z

@ygaeon I had the same problem when I installed Nyxt. After referring to this issue #1388, I fixed it by setting (define-configuration status-buffer ((height 30))) in ~/.config/nyxt/init.lisp.

jmercouris · 2021-05-27T14:43:17Z

I have fixed the appearance of the triangles when they status buffer is enlarged!

surrealreverie · 2021-05-28T11:01:54Z

@jmercouris Nice! I never noticed the odd appearance of the arrows until you mentioned it. Now the arrows look good, but one of them is now hiding the buffer option.

jmercouris · 2021-05-28T11:03:20Z

Hm, strange, you would need to adjust the margins between the elements I think

ygaeon · 2021-05-28T15:04:36Z

@ygaeon I had the same problem when I installed Nyxt. After referring to this issue #1388, I fixed it by setting (define-configuration status-buffer ((height 30))) in ~/.config/nyxt/init.lisp.

Thanks for this.. it helped and "squished" the "information bar" and it's not hiding the buttons anymore. Though, the text in the "information bar" is now kind of cut (see attached image)

surrealreverie · 2021-05-28T15:52:38Z

Hm, strange, you would need to adjust the margins between the elements I think

Thanks! that helped.

This is my configuration right now. I don't know if there are any better ways.

;; HACK fix modeline margins
;; controls: move margin-right 30px right to show hidden buffer option
;; url: move margin-left 20px right to restore its previous position
(define-configuration status-buffer
  ((style
    "body { background: rgb(200, 200, 200); font-size: 14px; color: rgb(32, 32, 32); padding: 0; margin: 0; line-height: 20px; }
.loader { border: 2px solid rgba(0,0,0,0); border-top-color: #37a8e4; border-radius: 50%; display: inline-block; width: 7px; height: 7px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.arrow-right { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.arrow-left { clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0% 50%); }
#container { display: grid; grid-template-columns: 120px 2fr 3fr 240px; overflow-y: hidden; }
#controls { background-color: rgb(80,80,80); padding-left: 5px; margin-right: -30px; z-index: 3; }
#url { background-color: rgb(120,120,120); min-width: 100px; text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; padding-right: 10px; padding-left: 15px; margin-left: 20px; z-index: 2; }
#tabs { background-color: rgb(160,160,160); min-width: 100px; overflow-x: scroll; text-align: left; padding-left: 15px; padding-right: 10px; margin-left: -10px; z-index: 1; }
#tabs::-webkit-scrollbar { display: none; }.tab { color: rgb(250, 250, 250); white-space: nowrap; text-decoration: none; padding-left: 5px; padding-right: 5px; }.tab:hover { color: black; }
#modes { background-color: rgb(120,120,120); color: rgb(230, 230, 230); text-align: right; padding-left: 10px; padding-right: 5px; overflow-x: scroll; white-space: nowrap; margin-left: -10px; z-index: 2; }
#modes::-webkit-scrollbar { display: none; }.button { color: rgb(250, 250, 250); text-decoration: none; padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px; }.button:hover { color: black; }")))

surrealreverie · 2021-05-28T16:00:03Z

@ygaeon I had the same problem when I installed Nyxt. After referring to this issue #1388, I fixed it by setting (define-configuration status-buffer ((height 30))) in ~/.config/nyxt/init.lisp.

Thanks for this.. it helped and "squished" the "information bar" and it's not hiding the buttons anymore. Though, the text in the "information bar" is now kind of cut (see attached image)

Seems like I have the same issue. After browsing through the source code, I found this option. This fixes it for me.

;; HACK make the message buffer taller to avoid cut off
(define-configuration window
  ((message-buffer-height 25)))

surrealreverie · 2021-05-28T16:57:40Z

Thanks for this.. it helped and "squished" the "information bar" and it's not hiding the buttons anymore. Though, the text in the "information bar" is now kind of cut (see attached image)

I think the buffer list button is hidden. Initially, I thought it got hidden after the arrow update but it looks like it has been hidden all along.
Just use the below configuration and adjust the margins if necessary. Hope it helps!

Hm, strange, you would need to adjust the margins between the elements I think

Thanks! that helped.

This is my configuration right now. I don't know if there are any better ways.

;; HACK fix modeline margins
;; controls: move margin-right 30px right to show hidden buffer option
;; url: move margin-left 20px right to restore its previous position
(define-configuration status-buffer
  ((style
    "body { background: rgb(200, 200, 200); font-size: 14px; color: rgb(32, 32, 32); padding: 0; margin: 0; line-height: 20px; }
.loader { border: 2px solid rgba(0,0,0,0); border-top-color: #37a8e4; border-radius: 50%; display: inline-block; width: 7px; height: 7px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.arrow-right { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.arrow-left { clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0% 50%); }
#container { display: grid; grid-template-columns: 120px 2fr 3fr 240px; overflow-y: hidden; }
#controls { background-color: rgb(80,80,80); padding-left: 5px; margin-right: -30px; z-index: 3; }
#url { background-color: rgb(120,120,120); min-width: 100px; text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; padding-right: 10px; padding-left: 15px; margin-left: 20px; z-index: 2; }
#tabs { background-color: rgb(160,160,160); min-width: 100px; overflow-x: scroll; text-align: left; padding-left: 15px; padding-right: 10px; margin-left: -10px; z-index: 1; }
#tabs::-webkit-scrollbar { display: none; }.tab { color: rgb(250, 250, 250); white-space: nowrap; text-decoration: none; padding-left: 5px; padding-right: 5px; }.tab:hover { color: black; }
#modes { background-color: rgb(120,120,120); color: rgb(230, 230, 230); text-align: right; padding-left: 10px; padding-right: 5px; overflow-x: scroll; white-space: nowrap; margin-left: -10px; z-index: 2; }
#modes::-webkit-scrollbar { display: none; }.button { color: rgb(250, 250, 250); text-decoration: none; padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px; }.button:hover { color: black; }")))

ygaeon · 2021-05-28T18:31:17Z

(define-configuration window
  ((message-buffer-height 25)))

Thanks, this surely did the trick.
Completely new to this browser ... so ;-)

However, as I value screen real estate .. I'm now considering putting it to 0 instead to hide it :-)

jmercouris · 2021-05-28T18:36:12Z

You might draw inspiration from my config:

(defun my-format-status (window)
  (let ((buffer (current-buffer window)))
    (markup:markup
     (:div :id "container"
           (:div :id "controls" :class "arrow-right"
                 (markup:raw (format-status-buttons)))
           (:div :id "url"
                 (markup:raw
                  (format-status-load-status buffer)
                  (format-status-url buffer)))))))

(define-configuration window
  ((status-formatter #'my-format-status)))

You can adjust the format-status function however you see fit.

jmercouris · 2021-05-28T18:39:32Z

Also if you are curious and interested in tweaking things in real time:

M-x lisp-repl

then in the REPL, enter the following:

(ffi-inspector-show (status-buffer (current-window)))

then you'll be able to adjust margins, tweak elements, add, elements, delete etc.

surrealreverie · 2021-05-29T10:06:17Z

You might draw inspiration from my config:
You can adjust the format-status function however you see fit.

Thanks! I will check it out.

Also if you are curious and interested in tweaking things in real time:

M-x lisp-repl

then in the REPL, enter the following:

(ffi-inspector-show (status-buffer (current-window)))

then you'll be able to adjust margins, tweak elements, add, elements, delete etc.

This is so cool. I love it!

jmercouris · 2021-06-11T11:56:31Z

Just to clarify, what is actually happening here is that the 'white bar' at the bottom is the message area. Above it is the status area. It appears that the message area clips the status area. In reality, the contents of the status area are too large to fit in the allocated height, they are then cropped to fit. That is why the suggestion of increasing the status area fixes the problem.

jmercouris · 2021-06-11T11:56:57Z

If you have any more problems or questions, please do not hesitate to ask!

jmercouris closed this as completed Jun 11, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI render of bottom "bar" has white overlap #1449

UI render of bottom "bar" has white overlap #1449

ygaeon commented May 23, 2021 •

edited

Loading

surrealreverie commented May 27, 2021

jmercouris commented May 27, 2021

surrealreverie commented May 28, 2021

jmercouris commented May 28, 2021

ygaeon commented May 28, 2021

surrealreverie commented May 28, 2021

surrealreverie commented May 28, 2021

surrealreverie commented May 28, 2021

ygaeon commented May 28, 2021 •

edited

Loading

jmercouris commented May 28, 2021

jmercouris commented May 28, 2021

surrealreverie commented May 29, 2021

jmercouris commented Jun 11, 2021

jmercouris commented Jun 11, 2021

UI render of bottom "bar" has white overlap #1449

UI render of bottom "bar" has white overlap #1449

Comments

ygaeon commented May 23, 2021 • edited Loading

surrealreverie commented May 27, 2021

jmercouris commented May 27, 2021

surrealreverie commented May 28, 2021

jmercouris commented May 28, 2021

ygaeon commented May 28, 2021

surrealreverie commented May 28, 2021

surrealreverie commented May 28, 2021

surrealreverie commented May 28, 2021

ygaeon commented May 28, 2021 • edited Loading

jmercouris commented May 28, 2021

jmercouris commented May 28, 2021

surrealreverie commented May 29, 2021

jmercouris commented Jun 11, 2021

jmercouris commented Jun 11, 2021

ygaeon commented May 23, 2021 •

edited

Loading

ygaeon commented May 28, 2021 •

edited

Loading