desktop selection

frontend/src/styles.css

@@ -555,6 +555,10 @@ button.danger:hover:not([disabled]) {
   justify-content: center;
 }
 
+.icon--flip-y {
+  transform: scaleX(-1);
+}
+
 .visually-hidden {
   position: absolute;
   width: 1px;
@@ -671,6 +675,10 @@ button.danger:hover:not([disabled]) {
   flex: 1 1 auto;
 }
 
+.main-content__body--workspace.main-content__body--has-detail > .desk-shell {
+  margin-right: calc(-1 * var(--detail-panel-width));
+}
+
 .main-content--has-detail {
   padding-right: var(--detail-panel-width);
 }
@@ -1373,16 +1381,29 @@ button.danger:hover:not([disabled]) {
   transition: background 0.12s ease, color 0.12s ease;
   position: relative;
   overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
-.folder-row span.name {
+.folder-row .name-wrap {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
   flex: 1;
+  min-width: 0;
+}
+
+.folder-row .name-wrap .name__label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.folder-row .folder-icon-image {
+  flex-shrink: 0;
+}
+
 .folder-row:hover {
   background: var(--sidebar-hover-bg);
   color: var(--fg);
@@ -2479,7 +2500,7 @@ button.danger:hover:not([disabled]) {
 }
 
 .panel.detail-panel {
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
   width: min(100vw, var(--detail-panel-width));
@@ -2491,7 +2512,7 @@ button.danger:hover:not([disabled]) {
   border-left: 1px solid var(--border);
   display: flex;
   flex-direction: column;
-  z-index: 20;
+  z-index: 1020;
 }
 
 .panel-header {