fix: add safety guards to font size change and show buttons on all screen sizes

- Add null checks and try/catch around fitAddon.fit() to prevent viewport errors
- Use requestAnimationFrame to ensure DOM is stable before fitting
- Remove isMobile condition from font size buttons in TerminalComponent
- Font size controls now visible on both mobile and desktop terminals

apps/web/src/components/terminal.tsx

@@ -266,9 +266,17 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     const newSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, fontSize + delta));
     setFontSize(newSize);
     localStorage.setItem(FONT_SIZE_KEY, newSize.toString());
-    if (termRef.current) {
+    if (termRef.current && fitAddonRef.current) {
       termRef.current.options.fontSize = newSize;
-      fitAddonRef.current?.fit();
+      requestAnimationFrame(() => {
+        if (termRef.current && fitAddonRef.current) {
+          try {
+            fitAddonRef.current.fit();
+          } catch {
+            // Ignore fit errors during re-initialization
+          }
+        }
+      });
     }
   };
 
@@ -345,8 +353,6 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
           )}
         </div>
         <div className="terminal-header-right">
-          {isMobile && (
-            <>
           <button
             className="terminal-header-button"
             onClick={() => handleFontSizeChange(-1)}
@@ -363,8 +369,6 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
           >
             A+
           </button>
-            </>
-          )}
           {onClose && (
             <button className="terminal-close" onClick={onClose} type="button">
               Close