From 49c21c069d19421cf0ab2b5079884ac38a995c31 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Sat, 21 Dec 2024 03:27:37 -0800
Subject: [PATCH] Fixed an issue that would render the OSD improperly in
 vertical mode. (#572)

---
 src/components/osd/OsdRevealer.tsx | 37 +++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/osd/OsdRevealer.tsx b/src/components/osd/OsdRevealer.tsx
index 7d3e410..09a391c 100644
--- a/src/components/osd/OsdRevealer.tsx
+++ b/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;
+}