[pmg-devel] [PATCH pmg-gui] css: fix icon/text alignment in panel headers for Firefox

[pmg-devel] [PATCH pmg-gui] css: fix icon/text alignment in panel headers for Firefox

[Christoph Heiss]

Add `vertial-align: text-top` to all panel header icons - for the
accompanying text, this already gets set through the `.x-tab-inner`
class.

Without this, in Firefox (116.0.1, at least) the icon and the text would
be slightly offset vertically - due to different baselines, I'd guess.
Chromium seems fine w/ and w/o the patch, no change there.

Signed-off-by: Christoph Heiss <c.heiss@proxmox.com>
---
 css/ext6-pmg.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
index 2f999f4..68e5b7a 100644
--- a/css/ext6-pmg.css
+++ b/css/ext6-pmg.css
@@ -180,6 +180,10 @@ table:not(.x-grid-item-selected) tr.x-grid-row.disabled {
     height: initial;
 }
 
+.x-tab-icon-el {
+    vertical-align: text-top;
+}
+
 tr.x-grid-row-summary  td.x-grid-cell {
     border-top: 1px solid black;
     font-weight: bold;
-- 
2.41.0

Re: [pmg-devel] [PATCH pmg-gui] css: fix icon/text alignment in panel headers for Firefox

[Christoph Heiss]

Just noticed this is broken in PBS as well.
I guess it should be then fixed in proxmox-widget-toolkit directly? Or
rather separately?

On Wed, Aug 09, 2023 at 12:07:37PM +0200, Christoph Heiss wrote:
>
> Add `vertial-align: text-top` to all panel header icons - for the
> accompanying text, this already gets set through the `.x-tab-inner`
> class.
>
> Without this, in Firefox (116.0.1, at least) the icon and the text would
> be slightly offset vertically - due to different baselines, I'd guess.
> Chromium seems fine w/ and w/o the patch, no change there.
>
> Signed-off-by: Christoph Heiss <c.heiss@proxmox.com>
> ---
>  css/ext6-pmg.css | 4 ++++
>  1 file changed, 4 insertions(+)
>
> diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
> index 2f999f4..68e5b7a 100644
> --- a/css/ext6-pmg.css
> +++ b/css/ext6-pmg.css
> @@ -180,6 +180,10 @@ table:not(.x-grid-item-selected) tr.x-grid-row.disabled {
>      height: initial;
>  }
>
> +.x-tab-icon-el {
> +    vertical-align: text-top;
> +}
> +
>  tr.x-grid-row-summary  td.x-grid-cell {
>      border-top: 1px solid black;
>      font-weight: bold;
> --
> 2.41.0
>
>
>
> _______________________________________________
> pmg-devel mailing list
> pmg-devel@lists.proxmox.com
> https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel
>
>

Re: [pmg-devel] [PATCH pmg-gui] css: fix icon/text alignment in panel headers for Firefox

[Stoiko Ivanov]

sorry for replying so late

* managed to reproduce it in firefox 102.15.0esr (version in bookworm)
* the patch fixes it for the pmg-gui

* Regarding your question if a fix is better done in pwt or a separate fix
  for proxmox-backup would be better I think Dominik or Thomas might have
  better ideas/suggestions

in any case - consider this:
Tested-by: Stoiko Ivanov <s.ivanov@proxmox.com>


On Wed, 9 Aug 2023 16:33:43 +0200
Christoph Heiss <c.heiss@proxmox.com> wrote:

> Just noticed this is broken in PBS as well.
> I guess it should be then fixed in proxmox-widget-toolkit directly? Or
> rather separately?
> 
> On Wed, Aug 09, 2023 at 12:07:37PM +0200, Christoph Heiss wrote:
> >
> > Add `vertial-align: text-top` to all panel header icons - for the
> > accompanying text, this already gets set through the `.x-tab-inner`
> > class.
> >
> > Without this, in Firefox (116.0.1, at least) the icon and the text would
> > be slightly offset vertically - due to different baselines, I'd guess.
> > Chromium seems fine w/ and w/o the patch, no change there.
> >
> > Signed-off-by: Christoph Heiss <c.heiss@proxmox.com>
> > ---
> >  css/ext6-pmg.css | 4 ++++
> >  1 file changed, 4 insertions(+)
> >
> > diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
> > index 2f999f4..68e5b7a 100644
> > --- a/css/ext6-pmg.css
> > +++ b/css/ext6-pmg.css
> > @@ -180,6 +180,10 @@ table:not(.x-grid-item-selected) tr.x-grid-row.disabled {
> >      height: initial;
> >  }
> >
> > +.x-tab-icon-el {
> > +    vertical-align: text-top;
> > +}
> > +
> >  tr.x-grid-row-summary  td.x-grid-cell {
> >      border-top: 1px solid black;
> >      font-weight: bold;
> > --
> > 2.41.0
> >
> >
> >
> > _______________________________________________
> > pmg-devel mailing list
> > pmg-devel@lists.proxmox.com
> > https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel
> >
> >  
> 
> 
> _______________________________________________
> pmg-devel mailing list
> pmg-devel@lists.proxmox.com
> https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel
> 
> 

Re: [pmg-devel] [PATCH pmg-gui] css: fix icon/text alignment in panel headers for Firefox

[Thomas Lamprecht]

Am 12/09/2023 um 16:15 schrieb Stoiko Ivanov:
> sorry for replying so late
> 
> * managed to reproduce it in firefox 102.15.0esr (version in bookworm)
> * the patch fixes it for the pmg-gui
> 
> * Regarding your question if a fix is better done in pwt or a separate fix
>   for proxmox-backup would be better I think Dominik or Thomas might have
>   better ideas/suggestions

I think widget-toolkit would be better, because if we're sure about this
fix it should work in any case and for all of our ExtJS based stuff, and
if there's something off we will notice quicker this way and have probably
a better grasp about what to do then.
> in any case - consider this:
> Tested-by: Stoiko Ivanov <s.ivanov@proxmox.com>

You could (temporarily) apply this, or wait for Christoph to send a
widget-toolkit, both are fine for me.

Re: [pmg-devel] [PATCH pmg-gui] css: fix icon/text alignment in panel headers for Firefox

[Dominik Csapak]

On 8/9/23 12:07, Christoph Heiss wrote:
> Add `vertial-align: text-top` to all panel header icons - for the
> accompanying text, this already gets set through the `.x-tab-inner`
> class.
> 
> Without this, in Firefox (116.0.1, at least) the icon and the text would
> be slightly offset vertically - due to different baselines, I'd guess.
> Chromium seems fine w/ and w/o the patch, no change there.
> 
> Signed-off-by: Christoph Heiss <c.heiss@proxmox.com>
> ---
>   css/ext6-pmg.css | 4 ++++
>   1 file changed, 4 insertions(+)
> 
> diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
> index 2f999f4..68e5b7a 100644
> --- a/css/ext6-pmg.css
> +++ b/css/ext6-pmg.css
> @@ -180,6 +180,10 @@ table:not(.x-grid-item-selected) tr.x-grid-row.disabled {
>       height: initial;
>   }
>   
> +.x-tab-icon-el {
> +    vertical-align: text-top;
> +}
> +
>   tr.x-grid-row-summary  td.x-grid-cell {
>       border-top: 1px solid black;
>       font-weight: bold;

i too looked at this, but i guess the exact rendering depends on the installed/used fonts,
since in chrome it had no effect whatsoever and in firefox (102.15.0esr as well as 117.0.1 )
it makes it worse for me?

i played a bit around with both the icon and text alignment, and did not find a setting
that was good both for firefox and chrome.

i think besides shipping a specific font this is not really fixable in general?