fix(app): backport rendering improvements (#1580)

fluxer_app/src/features/input/components/KeybindRecorder.tsx

@@ -13,6 +13,7 @@ import {isKeybindModifierKey} from '@app/features/input/utils/KeybindComboUtils'
 import {formatKeyCombo} from '@app/features/input/utils/KeybindUtils';
 import {isKeyboardActivationKey} from '@app/features/input/utils/KeyboardUtils';
 import type {GlobalKeyEvent} from '@app/features/platform/types/Electron';
+import {remFromPx} from '@app/features/theme/layout/RemFromPx';
 import {Button} from '@app/features/ui/button/Button';
 import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import {Popout} from '@app/features/ui/popover/PopoverPopout';
@@ -396,7 +397,7 @@ const KeybindEditorPopout: React.FC<KeybindEditorPopoutProps> = ({
 					data-flx="input.keybind-recorder.keybind-editor-popout.recorder-box.start-recording"
 				>
 					<KeyboardIcon
-						size={20}
+						size={remFromPx(20)}
 						weight="bold"
 						className={styles.recorderIcon}
 						data-flx="input.keybind-recorder.keybind-editor-popout.recorder-icon"
@@ -433,7 +434,9 @@ const KeybindEditorPopout: React.FC<KeybindEditorPopoutProps> = ({
 							small
 							type="button"
 							onClick={handleClear}
-							leftIcon={<TrashIcon size={16} data-flx="input.keybind-recorder.keybind-editor-popout.trash-icon" />}
+							leftIcon={
+								<TrashIcon size={remFromPx(16)} data-flx="input.keybind-recorder.keybind-editor-popout.trash-icon" />
+							}
 							data-flx="input.keybind-recorder.keybind-editor-popout.button.clear"
 						>
 							<Trans>Clear</Trans>
@@ -447,7 +450,7 @@ const KeybindEditorPopout: React.FC<KeybindEditorPopoutProps> = ({
 							onClick={handleReset}
 							leftIcon={
 								<ArrowCounterClockwiseIcon
-									size={16}
+									size={remFromPx(16)}
 									data-flx="input.keybind-recorder.keybind-editor-popout.arrow-counter-clockwise-icon"
 								/>
 							}
@@ -526,7 +529,11 @@ export const KeybindRecorder: React.FC<KeybindRecorderProps> = ({
 				>
 					<div className={styles.layout} data-flx="input.keybind-recorder.layout">
 						<div className={styles.editIconLeft} aria-hidden data-flx="input.keybind-recorder.edit-icon-left">
-							<PencilSimpleIcon size={12} weight="bold" data-flx="input.keybind-recorder.pencil-simple-icon" />
+							<PencilSimpleIcon
+								size={remFromPx(12)}
+								weight="bold"
+								data-flx="input.keybind-recorder.pencil-simple-icon"
+							/>
 						</div>
 						<div className={styles.inputWrapper} data-flx="input.keybind-recorder.input-wrapper">
 							<span className={styles.input} data-flx="input.keybind-recorder.input">