Fixed an issue that would render the OSD improperly in vertical mode. (#572)

src/components/osd/OsdRevealer.tsx

@@ -5,9 +5,26 @@ import { OSDIcon } from './icon/index';
 import { revealerSetup } from './helpers';
 import { Gtk } from 'astal/gtk3';
 import { bind } from 'astal';
+import { OSDOrientation } from 'src/lib/types/options';
 
 const { orientation } = options.theme.osd;
 
+const VerticalOsd = ({ currentOrientation }: OsdProps): JSX.Element => (
+    <box vertical>
+        <OSDLabel />
+        <OSDBar orientation={currentOrientation} />
+        <OSDIcon />
+    </box>
+);
+
+const HorizontalOsd = ({ currentOrientation }: OsdProps): JSX.Element => (
+    <box>
+        <OSDIcon />
+        <OSDBar orientation={currentOrientation} />
+        <OSDLabel />
+    </box>
+);
+
 export const OsdRevealer = (): JSX.Element => {
     const osdOrientation = bind(orientation).as((currentOrientation) => currentOrientation === 'vertical');
 
@@ -16,24 +33,16 @@ export const OsdRevealer = (): JSX.Element => {
             <box className={'osd-container'} vertical={osdOrientation}>
                 {bind(orientation).as((currentOrientation) => {
                     if (currentOrientation === 'vertical') {
-                        return (
-                            <box>
-                                <OSDLabel />
-                                <OSDBar orientation={currentOrientation} />
-                                <OSDIcon />
-                            </box>
-                        );
+                        return <VerticalOsd currentOrientation={currentOrientation} />;
                     }
 
-                    return (
-                        <box>
-                            <OSDIcon />
-                            <OSDBar orientation={currentOrientation} />
-                            <OSDLabel />
-                        </box>
-                    );
+                    return <HorizontalOsd currentOrientation={currentOrientation} />;
                 })}
             </box>
         </revealer>
     );
 };
+
+interface OsdProps {
+    currentOrientation: OSDOrientation;
+}