From ac35f81476fc2561d437ee6e500e58e33a644c69 Mon Sep 17 00:00:00 2001
From: Oleh Polisan <39007846+PolisanTheEasyNick@users.noreply.github.com>
Date: Sun, 5 May 2024 05:14:08 +0300
Subject: [PATCH] fix: Screenshare UI for non-linux systems (#568)

---
 src/renderer/components/ScreenSharePicker.tsx | 29 ++++++++++---------
 src/renderer/components/screenSharePicker.css |  9 ++++--
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/ScreenSharePicker.tsx b/src/renderer/components/ScreenSharePicker.tsx
index 1c53b63..e9fd78e 100644
--- a/src/renderer/components/ScreenSharePicker.tsx
+++ b/src/renderer/components/ScreenSharePicker.tsx
@@ -193,11 +193,15 @@ function StreamSettings({
     );
 
     return (
-        <div className="vcd-screen-picker-settings-grid">
+        <div className={isLinux ? "vcd-screen-picker-settings-grid" : ""}>
             <div>
                 <Forms.FormTitle>What you're streaming</Forms.FormTitle>
                 <Card className="vcd-screen-picker-card vcd-screen-picker-preview">
-                    <img src={thumb} alt="" />
+                    <img
+                        src={thumb}
+                        alt=""
+                        className={isLinux ? "vcd-screen-picker-preview-img-linux" : "vcd-screen-picker-preview-img"}
+                    />
                     <Text variant="text-sm/normal">{source.name}</Text>
                 </Card>
 
@@ -283,23 +287,22 @@ function StreamSettings({
                                     </p>
                                 </div>
                             </div>
+                            {isWindows && (
+                                <Switch
+                                    value={settings.audio}
+                                    onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
+                                    hideBorder
+                                    className="vcd-screen-picker-audio"
+                                >
+                                    Stream With Audio
+                                </Switch>
+                            )}
                         </section>
                     </div>
                 </Card>
             </div>
 
             <div>
-                {isWindows && (
-                    <Switch
-                        value={settings.audio}
-                        onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
-                        hideBorder
-                        className="vcd-screen-picker-audio"
-                    >
-                        Stream With Audio
-                    </Switch>
-                )}
-
                 {isLinux && (
                     <AudioSourcePickerLinux
                         audioSource={settings.audioSource}
diff --git a/src/renderer/components/screenSharePicker.css b/src/renderer/components/screenSharePicker.css
index 9233837..c2586a1 100644
--- a/src/renderer/components/screenSharePicker.css
+++ b/src/renderer/components/screenSharePicker.css
@@ -17,7 +17,7 @@
     grid-template-columns: 1fr 1fr;
 }
 
-.vcd-screen-picker-settings-grid > div {
+.vcd-screen-picker-settings-grid>div {
     display: flex;
     flex-direction: column;
 }
@@ -67,11 +67,16 @@
     box-sizing: border-box;
 }
 
-.vcd-screen-picker-preview img {
+.vcd-screen-picker-preview-img-linux {
     width: 100%;
     margin-bottom: 0.5em;
 }
 
+.vcd-screen-picker-preview-img {
+    width: 90%;
+    margin-bottom: 0.5em;
+}
+
 .vcd-screen-picker-preview {
     display: flex;
     flex-direction: column;