feat: contract main area for inspector for large viewports (#7051)

web/assets/css/transmission-app.scss

@@ -1,17 +1,23 @@
 /// MIXINS
 
-@mixin for-phone-only {
+@mixin viewport-small {
   @media (width < 600px) {
     @content;
   }
 }
 
-@mixin for-tablet-portrait-up {
+@mixin viewport-medium {
   @media (width >= 600px) {
     @content;
   }
 }
 
+@mixin viewport-large {
+  @media (width >= 950px) {
+    @content;
+  }
+}
+
 :root {
   /* z-index enum */
   --z-index-popup: 2;
@@ -21,7 +27,7 @@
   --dialog-padding: 20px;
   --logo-size: 64px;
   --pauseresume-size: 20px;
-  --popup-top: 51px; // TODO: ugly that this is hardcoded
+  --popup-top: 82px; // TODO: ugly that this is hardcoded
   --toolbar-height: 50px;
 
   /* colors related to torrent status */
@@ -385,7 +391,7 @@ a {
   height: 30px;
   padding-left: 5px;
 
-  @include for-phone-only {
+  @include viewport-small {
     :not(select):not(input):not(option):not(.flexible-space) {
       display: none;
     }
@@ -555,16 +561,13 @@ a {
 
     .torrent-progress-details,
     .torrent-peer-details {
+      font-size: small;
+
       &.error {
         color: var(--color-fg-error);
       }
     }
 
-    .torrent-progress-details,
-    .torrent-peer-details {
-      font-size: small;
-    }
-
     &.compact {
       --icon-size: 16px;
 
@@ -701,7 +704,6 @@ a {
 
     &.compact {
       min-width: 100px;
-      width: 10vw;
     }
 
     &.leech {
@@ -796,21 +798,17 @@ a {
 
 /// PREFERENCES DIALOG
 
-@include for-phone-only {
+@include viewport-small {
   input[type='checkbox'] {
     height: 20px;
     width: 20px;
   }
 }
 
-#inspector,
-#prefs-dialog {
-  @include for-phone-only {
-    left: 0;
-  }
-  @include for-tablet-portrait-up {
-    border-left: 1px solid var(--color-border-default);
-    width: 570px;
+#inspector {
+  @include viewport-large {
+    box-shadow: initial;
+    position: initial;
   }
 }
 
@@ -819,7 +817,6 @@ a {
   background: $background-color;
   bottom: 0;
   right: 0;
-  top: var(--popup-top);
   z-index: var(--z-index-popup);
 
   .tabs-page {
@@ -934,11 +931,14 @@ a {
   top: var(--popup-top);
   z-index: var(--z-index-popup);
 
-  @include for-phone-only {
+  @include viewport-small {
+    top: 0;
     left: 0;
   }
-  @include for-tablet-portrait-up {
-    width: 550px;
+  @include viewport-medium {
+    border-left: 1px solid var(--color-border-default);
+    min-width: 570px;
+    width: 570px;
   }
 }
 
@@ -975,10 +975,10 @@ a {
   overflow-x: hidden;
   overflow-y: auto;
 
-  @include for-phone-only {
+  @include viewport-small {
     padding: 0 8px 20px;
   }
-  @include for-tablet-portrait-up {
+  @include viewport-medium {
     padding: 0 20px 20px;
   }
 }
@@ -1229,7 +1229,7 @@ a {
   .percent-done {
     width: 10%;
 
-    @include for-phone-only {
+    @include viewport-small {
       width: 12%;
     }
   }
@@ -1244,7 +1244,7 @@ a {
     overflow-x: hidden;
     text-overflow: ellipsis;
 
-    @include for-phone-only {
+    @include viewport-small {
       text-align: left;
       width: 20%;
     }
@@ -1254,7 +1254,7 @@ a {
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    @include for-tablet-portrait-up {
+    @include viewport-medium {
       width: 20%;
     }
   }
@@ -1361,7 +1361,7 @@ a {
   top: 50px;
   z-index: var(--z-index-popup);
 
-  @include for-phone-only {
+  @include viewport-small {
     height: 80vh;
   }
 
@@ -1490,7 +1490,7 @@ a {
 
 /// DIALOGS
 
-@include for-phone-only {
+@include viewport-small {
   .dialog-buttons {
     padding-top: var(--dialog-logo-padding);
   }
@@ -1513,7 +1513,7 @@ a {
   }
 }
 
-@include for-tablet-portrait-up {
+@include viewport-medium {
   .dialog-container {
     min-width: 500px;
     position: absolute;
@@ -1581,7 +1581,7 @@ dialog {
   padding: 0;
   z-index: var(--z-index-popup);
 
-  @include for-tablet-portrait-up {
+  @include viewport-medium {
     border: 0;
     border-radius: 8px;
     max-width: 50%;
@@ -1701,10 +1701,10 @@ dialog {
     grid-template-columns: auto 1fr;
     margin-top: 4px;
 
-    @include for-phone-only {
+    @include viewport-small {
       margin: 4px 0 16px;
     }
-    @include for-tablet-portrait-up {
+    @include viewport-medium {
       margin: 4px 16px 16px;
     }
 

web/src/inspector.js

@@ -43,7 +43,7 @@ export class Inspector extends EventTarget {
     );
     this._setTorrents(this.controller.getSelectedTorrents());
 
-    document.body.append(this.elements.root);
+    document.querySelector('#mainwin-workarea').append(this.elements.root);
   }
 
   close() {