frontend: LogViewer: Fix log not expanding on full screen

[vyncent-t]

fixes issue #2640

Description

This PR fixes an issue with the LogViewer component where log lines did not expand to the full width when in full-screen mode. This issue impacts user experience, especially for users relying on the full-screen view to read long log lines.

Key Changes

1. Full-Width Expansion:
   • Updated the LogViewer component's logic allowing render handlers to run resizes to ensure log lines expand to utilize the full width in full-screen mode.

---

Steps to Test

1. Open the LogViewer component in the pods details view.

2. Switch to full-screen mode.

3. Verify:

   • Log lines expand to the full width of the screen in full-screen mode.
   • Log lines remain readable and aligned correctly in both standard and full-screen modes.

4. Test on various screen sizes to ensure responsiveness and compatibility.

[vyncent-t]

note: I have tried setting different widths to take up the full size of the container, this would only resize on save after the full screen mode is already expanded and would not work if starting from the beginning (goes to details, opens log viewer, click full screen, would still be half size)

the xterm fitAddonRef.current!.fit(); is the main fix for setting the sizes, I also tried looking into ResizeObserver but I think that would be too much for performance.

[sniok]

would calling fitAddonRef.current!.fit(); inside onFullScreenToggled callback on Dialog component work? This current change seems overly complicated, there's a new state variable with an unusual setter that seemingly triggers the effect that sets up the whole terminal from scratch.

[vyncent-t]

@sniok @joaquimrocha

I have tried the following and it does not seem to not fix the full screen issue, the console log prints but the fit method does not resize anything, I tried to call it inside the onFullScreenToggled entirely and I also tried creating a stand alone function and passing that in and had the same result, all three ways still print but the calling of the fitAddonRef.current?.fit() does not work, I saw this trend of style changes (settings sx width and minWidth and also different flex displays ) and fitAddonRef.current?.fit() not rendering unless the screen is already maximized and I'm opening the changes live and thought maybe it just needed to rerender from the useEffect

<Dialog title={title} withFullScreen onClose={onClose} onFullScreenToggled={(isFullScreen: boolean) => { if (isFullScreen) { fitAddonRef.current?.fit(); console.log("REFITS") } }} {...other}>

---

---

--

also tried inserting some new instances to maybe try that too but nothing

    fitAddonRef.current = new FitAddon();

    if (isFullScreen) {
      fitAddonRef.current?.fit();
      console.log("REFITS")
    }
  }

[vyncent-t]

using the timer fix from this part uses in the project @sniok

<Dialog title={title} onFullScreenToggled={() => { setTimeout(() => { fitAddonRef.current!.fit(); }, 1); }} withFullScreen onClose={onClose} {...other} >

[vyncent-t]

need i18n missing words from #2660

[skoeva]

The i18n failure should be fixed by rebasing, otherwise LGTM