Wrapped fields on series details page in div

This allows you to triple click to select the path for instance, similar to the details page in radarr.
Sonarr · Feb 7, 2024 · 63e132d · 63e132d
1 parent 6ab1d8e
commit 63e132d
Showing 1 changed file with 69 additions and 55 deletions.
diff --git a/frontend/src/Series/Details/SeriesDetails.js b/frontend/src/Series/Details/SeriesDetails.js
@@ -428,14 +428,16 @@ class SeriesDetails extends Component {
                     className={styles.detailsLabel}
                     size={sizes.LARGE}
                   >
-                    <Icon
-                      name={icons.FOLDER}
-                      size={17}
-                    />
 
-                    <span className={styles.path}>
-                      {path}
-                    </span>
+                    <div>
+                      <Icon
+                        name={icons.FOLDER}
+                        size={17}
+                      />
+                      <span className={styles.path}>
+                        {path}
+                      </span>
+                    </div>
                   </Label>
 
                   <Tooltip
@@ -444,16 +446,18 @@ class SeriesDetails extends Component {
                         className={styles.detailsLabel}
                         size={sizes.LARGE}
                       >
-                        <Icon
-                          name={icons.DRIVE}
-                          size={17}
-                        />
 
-                        <span className={styles.sizeOnDisk}>
-                          {
-                            formatBytes(sizeOnDisk || 0)
-                          }
-                        </span>
+                        <div>
+                          <Icon
+                            name={icons.DRIVE}
+                            size={17}
+                          />
+                          <span className={styles.sizeOnDisk}>
+                            {
+                              formatBytes(sizeOnDisk || 0)
+                            }
+                          </span>
+                        </div>
                       </Label>
                     }
                     tooltip={
@@ -470,47 +474,53 @@ class SeriesDetails extends Component {
                     title={translate('QualityProfile')}
                     size={sizes.LARGE}
                   >
-                    <Icon
-                      name={icons.PROFILE}
-                      size={17}
-                    />
 
-                    <span className={styles.qualityProfileName}>
-                      {
-                        <QualityProfileNameConnector
-                          qualityProfileId={qualityProfileId}
-                        />
-                      }
-                    </span>
+                    <div>
+                      <Icon
+                        name={icons.PROFILE}
+                        size={17}
+                      />
+                      <span className={styles.qualityProfileName}>
+                        {
+                          <QualityProfileNameConnector
+                            qualityProfileId={qualityProfileId}
+                          />
+                        }
+                      </span>
+                    </div>
                   </Label>
 
                   <Label
                     className={styles.detailsLabel}
                     size={sizes.LARGE}
                   >
-                    <Icon
-                      name={monitored ? icons.MONITORED : icons.UNMONITORED}
-                      size={17}
-                    />
 
-                    <span className={styles.qualityProfileName}>
-                      {monitored ? translate('Monitored') : translate('Unmonitored')}
-                    </span>
+                    <div>
+                      <Icon
+                        name={monitored ? icons.MONITORED : icons.UNMONITORED}
+                        size={17}
+                      />
+                      <span className={styles.qualityProfileName}>
+                        {monitored ? translate('Monitored') : translate('Unmonitored')}
+                      </span>
+                    </div>
                   </Label>
 
                   <Label
                     className={styles.detailsLabel}
                     title={statusDetails.message}
                     size={sizes.LARGE}
                   >
-                    <Icon
-                      name={statusDetails.icon}
-                      size={17}
-                    />
 
-                    <span className={styles.qualityProfileName}>
-                      {statusDetails.title}
-                    </span>
+                    <div>
+                      <Icon
+                        name={statusDetails.icon}
+                        size={17}
+                      />
+                      <span className={styles.qualityProfileName}>
+                        {statusDetails.title}
+                      </span>
+                    </div>
                   </Label>
 
                   {
@@ -520,14 +530,16 @@ class SeriesDetails extends Component {
                         title={translate('Network')}
                         size={sizes.LARGE}
                       >
-                        <Icon
-                          name={icons.NETWORK}
-                          size={17}
-                        />
 
-                        <span className={styles.qualityProfileName}>
-                          {network}
-                        </span>
+                        <div>
+                          <Icon
+                            name={icons.NETWORK}
+                            size={17}
+                          />
+                          <span className={styles.qualityProfileName}>
+                            {network}
+                          </span>
+                        </div>
                       </Label>
                   }
 
@@ -537,14 +549,16 @@ class SeriesDetails extends Component {
                         className={styles.detailsLabel}
                         size={sizes.LARGE}
                       >
-                        <Icon
-                          name={icons.EXTERNAL_LINK}
-                          size={17}
-                        />
 
-                        <span className={styles.links}>
-                          {translate('Links')}
-                        </span>
+                        <div>
+                          <Icon
+                            name={icons.EXTERNAL_LINK}
+                            size={17}
+                          />
+                          <span className={styles.links}>
+                            {translate('Links')}
+                          </span>
+                        </div>
                       </Label>
                     }
                     tooltip={