[PATCH pmg-gui] ui: pbs snapshotview: set minWidth for verify toast

[PATCH pmg-gui] ui: pbs snapshotview: set minWidth for verify toast

[Hannes Laimer]

Avoid having text wrapped and cut off when zoomed >100%

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
 js/PBSSnapshotView.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/PBSSnapshotView.js b/js/PBSSnapshotView.js
index 0d4b2af..15f6c35 100644
--- a/js/PBSSnapshotView.js
+++ b/js/PBSSnapshotView.js
@@ -51,6 +51,7 @@ Ext.define('PMG.PBSConfig', {
                     Ext.toast({
                         title: gettext('Verify'),
                         html: gettext('Started verification task on the Proxmox Backup Server.'),
+                        minWidth: 350,
                         iconCls: 'fa fa-check',
                         autoCloseDelay: 5000,
                         closable: true,
-- 
2.47.3

Re: [PATCH pmg-gui] ui: pbs snapshotview: set minWidth for verify toast

[Dominik Csapak]

mhmm this is only reproducible on firefox, on chrome(ium) it works
as intended...

while it's probably better than not having it, it'll very likely break
for other languages too that have longer strings there...

also extjs is always a bit iffy with non 100% zoom

i think a more generic solution would be something like this:

---8<---
diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
index eabe9de..75950d2 100644
--- a/css/ext6-pmg.css
+++ b/css/ext6-pmg.css
@@ -306,3 +306,7 @@ kbd {
      padding: 2px 4px;
      white-space: nowrap;
  }
+
+.pmg-toast-fix-width {
+    width: max-content !important;
+}
diff --git a/js/PBSSnapshotView.js b/js/PBSSnapshotView.js
index 0d4b2af..3bcb87f 100644
--- a/js/PBSSnapshotView.js
+++ b/js/PBSSnapshotView.js
@@ -53,6 +53,7 @@ Ext.define('PMG.PBSConfig', {
                          html: gettext('Started verification task on 
the Proxmox Backup Server.'),
                          iconCls: 'fa fa-check',
                          autoCloseDelay: 5000,
+                        bodyCls: 'pmg-toast-fix-width',
                          closable: true,
                      });
                      me.loadSnapshots();
--->8---

but this might be a problem when we *want* the text to wrap...
(maybe an addition max-width etc. could help here, but would
need more tests)

On 6/9/26 1:20 PM, Hannes Laimer wrote:
> Avoid having text wrapped and cut off when zoomed >100%
> 
> Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
> ---
>   js/PBSSnapshotView.js | 1 +
>   1 file changed, 1 insertion(+)
> 
> diff --git a/js/PBSSnapshotView.js b/js/PBSSnapshotView.js
> index 0d4b2af..15f6c35 100644
> --- a/js/PBSSnapshotView.js
> +++ b/js/PBSSnapshotView.js
> @@ -51,6 +51,7 @@ Ext.define('PMG.PBSConfig', {
>                       Ext.toast({
>                           title: gettext('Verify'),
>                           html: gettext('Started verification task on the Proxmox Backup Server.'),
> +                        minWidth: 350,
>                           iconCls: 'fa fa-check',
>                           autoCloseDelay: 5000,
>                           closable: true,

Re: [PATCH pmg-gui] ui: pbs snapshotview: set minWidth for verify toast

[Hannes Laimer]

On 2026-06-09 13:52, Dominik Csapak wrote:
> mhmm this is only reproducible on firefox, on chrome(ium) it works
> as intended...
> 

it is for sure a little flaky, but I also got it on chrome (needed more
zoom though)

> while it's probably better than not having it, it'll very likely break
> for other languages too that have longer strings there...
> 
> also extjs is always a bit iffy with non 100% zoom
> 
> i think a more generic solution would be something like this:
> 
> ---8<---
> diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
> index eabe9de..75950d2 100644
> --- a/css/ext6-pmg.css
> +++ b/css/ext6-pmg.css
> @@ -306,3 +306,7 @@ kbd {
>      padding: 2px 4px;
>      white-space: nowrap;
>  }
> +
> +.pmg-toast-fix-width {
> +    width: max-content !important;
> +}
> diff --git a/js/PBSSnapshotView.js b/js/PBSSnapshotView.js
> index 0d4b2af..3bcb87f 100644
> --- a/js/PBSSnapshotView.js
> +++ b/js/PBSSnapshotView.js
> @@ -53,6 +53,7 @@ Ext.define('PMG.PBSConfig', {
>                          html: gettext('Started verification task on the
> Proxmox Backup Server.'),
>                          iconCls: 'fa fa-check',
>                          autoCloseDelay: 5000,
> +                        bodyCls: 'pmg-toast-fix-width',
>                          closable: true,
>                      });
>                      me.loadSnapshots();
> --->8---
> 
> but this might be a problem when we *want* the text to wrap...
> (maybe an addition max-width etc. could help here, but would
> need more tests)

actually, with `width` (instead of `minWidth`) we get correct vertical
growth. we do have a lot of fixed width stuff all over, maybe just have
it fixed here as well is the best approach..

> 
> On 6/9/26 1:20 PM, Hannes Laimer wrote:
>> Avoid having text wrapped and cut off when zoomed >100%
>>
>> Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
>> ---
>>   js/PBSSnapshotView.js | 1 +
>>   1 file changed, 1 insertion(+)
>>
>> diff --git a/js/PBSSnapshotView.js b/js/PBSSnapshotView.js
>> index 0d4b2af..15f6c35 100644
>> --- a/js/PBSSnapshotView.js
>> +++ b/js/PBSSnapshotView.js
>> @@ -51,6 +51,7 @@ Ext.define('PMG.PBSConfig', {
>>                       Ext.toast({
>>                           title: gettext('Verify'),
>>                           html: gettext('Started verification task on
>> the Proxmox Backup Server.'),
>> +                        minWidth: 350,
>>                           iconCls: 'fa fa-check',
>>                           autoCloseDelay: 5000,
>>                           closable: true,
> 

superseded: [PATCH pmg-gui] ui: pbs snapshotview: set minWidth for verify toast

[Hannes Laimer]

superseded-by:
https://lore.proxmox.com/pmg-devel/20260609133543.236178-1-h.laimer@proxmox.com/T/#u

On 2026-06-09 13:20, Hannes Laimer wrote:
> Avoid having text wrapped and cut off when zoomed >100%
> 
> Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
> ---
>  js/PBSSnapshotView.js | 1 +
>  1 file changed, 1 insertion(+)
> 
> diff --git a/js/PBSSnapshotView.js b/js/PBSSnapshotView.js
> index 0d4b2af..15f6c35 100644
> --- a/js/PBSSnapshotView.js
> +++ b/js/PBSSnapshotView.js
> @@ -51,6 +51,7 @@ Ext.define('PMG.PBSConfig', {
>                      Ext.toast({
>                          title: gettext('Verify'),
>                          html: gettext('Started verification task on the Proxmox Backup Server.'),
> +                        minWidth: 350,
>                          iconCls: 'fa fa-check',
>                          autoCloseDelay: 5000,
>                          closable: true,