From c54e46c412e2850852070690b58f43154072d73e Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Wed, 7 Jan 2026 13:36:43 +0200
Subject: [PATCH] style: Improve embed options UI and logic

Refactored the embed options layout to use a grid for better alignment and spacing. The 'Link title' and 'Show user avatar' checkboxes are now disabled and visually dimmed when 'Show title' is unchecked, improving usability and clarity.
---
 .../media-actions/MediaShareEmbed.jsx         | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx b/frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx
index 91f5b904..bba326d9 100644
--- a/frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx
+++ b/frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx
@@ -207,39 +207,37 @@ export function MediaShareEmbed(props) {
 									</div>*/}
 
                 <div className="option-content">
-                  <div className="ratio-options">
+                  <div className="ratio-options" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 10px' }}>
                     <div className="options-group">
-                      <label style={{ minHeight: '36px' }}>
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}>
                         <input type="checkbox" checked={showTitle} onChange={onShowTitleChange} />
                         Show title
                       </label>
                     </div>
 
-                    {showTitle && (
-                      <div className="options-group" style={{ paddingLeft: '20px' }}>
-                        <label style={{ minHeight: '36px' }}>
-                          <input type="checkbox" checked={linkTitle} onChange={onLinkTitleChange} />
-                          Link title
-                        </label>
-                      </div>
-                    )}
+                    <div className="options-group">
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap', opacity: showTitle ? 1 : 0.5 }}>
+                        <input type="checkbox" checked={linkTitle} onChange={onLinkTitleChange} disabled={!showTitle} />
+                        Link title
+                      </label>
+                    </div>
 
                     <div className="options-group">
-                      <label style={{ minHeight: '36px' }}>
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}>
                         <input type="checkbox" checked={showRelated} onChange={onShowRelatedChange} />
                         Show related
                       </label>
                     </div>
 
                     <div className="options-group">
-                      <label style={{ minHeight: '36px' }}>
-                        <input type="checkbox" checked={showUserAvatar} onChange={onShowUserAvatarChange} />
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap', opacity: showTitle ? 1 : 0.5 }}>
+                        <input type="checkbox" checked={showUserAvatar} onChange={onShowUserAvatarChange} disabled={!showTitle} />
                         Show user avatar
                       </label>
                     </div>
 
                     <div className="options-group">
-                      <label style={{ minHeight: '36px' }}>
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}>
                         <input type="checkbox" checked={keepAspectRatio} onChange={onKeepAspectRatioChange} />
                         Keep aspect ratio
                       </label>