Updated styles to use em instead of px

src/common/components/ButtonRadio.sass

@@ -3,10 +3,11 @@
 .ButtonRadio
   display: flex
   justify-content: center
+  flex-wrap: wrap
+  gap: .25em
 
   .radio-button
     @extend .button
-    margin: 6px
 
   .radio-button.checked
     @extend .button.active

src/common/style.sass

@@ -5,30 +5,29 @@ $btn-color: #075656 !default
 $btn-select: teal !default
 
 body
-  width: 400px
+  width: 30em
   text-align: center
   background-color: $background-color
   color: $text-color
   font-family: sans-serif
+  padding: 1em
 
 .container
   display: block
   text-align: center
-  margin: 0 32px
-  margin-bottom: 15px
 
 .button
-  border-radius: 5px
+  border-radius: .5em
   background-color: $btn-color
-  border: 4px solid $btn-color
+  border: .2em solid $btn-color
   color: $text-color
   font-size: 0.8rem
   font-weight: 400
-  padding: 4px 15px
+  padding: .5em
   text-align: center
 
   &.active
-    border: 4px solid $btn-select
+    border-color: $btn-select
 
   &:focus
     outline: none

src/popup/popup.sass

@@ -1,4 +1,13 @@
 .radio-label
     font-size: 1.1rem
-    margin: 15px auto
     display: block
+
+.container
+    display: grid
+    grid-auto-flow: row
+    gap: 1.5em
+
+.container > section
+    display: grid
+    grid-auto-flow: row
+    gap: 1em

src/popup/popup.tsx

@@ -4,8 +4,6 @@ import { getTargetPlatfromSettingsEntiries, ExtensionSettings, TargetPlatformNam
 import { useLbrySettings } from '../common/useSettings'
 import './popup.sass'
 
-
-
 /** Utilty to set a setting in the browser */
 const setSetting = <K extends keyof ExtensionSettings>(setting: K, value: ExtensionSettings[K]) => chrome.storage.local.set({ [setting]: value });
 
@@ -17,16 +15,22 @@ function WatchOnLbryPopup() {
   const { redirect, targetPlatform } = useLbrySettings();
 
   return <div className='container'>
-    <label className='radio-label'>Enable Redirection:</label>
-    <ButtonRadio value={redirect ? 'YES' : 'NO'} options={['YES', 'NO']}
-      onChange={redirect => setSetting('redirect', redirect.toLowerCase() === 'yes')} />
-    <label className='radio-label'>Where would you like to redirect?</label>
-    <ButtonRadio value={targetPlatform} options={platformOptions}
-      onChange={(platform: TargetPlatformName) => setSetting('targetPlatform', platform)} />
-    <label className='radio-label'>Other useful tools:</label>
-    <a href='/tools/YTtoLBRY.html' target='_blank'>
-      <button type='button' className='btn1 button is-primary'>Subscriptions Converter</button>
-    </a>
+    <section>
+      <label className='radio-label'>Enable Redirection:</label>
+      <ButtonRadio value={redirect ? 'YES' : 'NO'} options={['YES', 'NO']}
+        onChange={redirect => setSetting('redirect', redirect.toLowerCase() === 'yes')} />
+    </section>
+    <section>
+      <label className='radio-label'>Where would you like to redirect?</label>
+      <ButtonRadio value={targetPlatform} options={platformOptions}
+        onChange={(platform: TargetPlatformName) => setSetting('targetPlatform', platform)} />
+    </section>
+    <section>
+      <label className='radio-label'>Other useful tools:</label>
+      <a href='/tools/YTtoLBRY.html' target='_blank'>
+        <button type='button' className='btn1 button is-primary'>Subscriptions Converter</button>
+      </a>
+    </section>
   </div>;
 }