fix(ui): keep context-menu highlight outline intact in virtual lists

Author: antonreshetov

src/renderer/components/http/RequestsListItem.vue

@@ -411,7 +411,7 @@ onClickOutside(itemRef, () => {
     }
   }
   &.is-highlighted {
-    @apply outline-primary rounded-md outline-2 -outline-offset-2;
+    @apply outline-primary z-20 rounded-md outline-2 -outline-offset-2;
     &.is-focused,
     &.is-selected,
     &.is-multi-selected {

src/renderer/main.ts

@@ -2,8 +2,8 @@ import { createApp } from 'vue'
 import VueVirtualScroller from 'vue-virtual-scroller'
 import App from './App.vue'
 import { router } from './router'
-import './styles.css'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import './styles.css'
 
 declare global {
   interface Window {

src/renderer/styles.css

@@ -211,6 +211,31 @@ body {
   opacity: 1;
 }
 
+/*
+ * vue-virtual-scroller задаёт item-wrapper высоту ровно N×item-size с
+ * overflow: hidden, из-за чего у последнего элемента списка обрезается нижняя
+ * часть highlight-обводки (outline с -outline-offset при открытии контекстного
+ * меню). Полностью отключать клиппинг нельзя: scroller паркует осиротевшие
+ * item-view из пула за пределами контента, и без клиппинга они наслаиваются на
+ * видимый список при быстром переключении папок. overflow: clip сохраняет
+ * клиппинг, а небольшой clip-margin даёт запас, чтобы обводка отрисовалась
+ * целиком.
+ */
+.vue-recycle-scroller__item-wrapper {
+  overflow: clip;
+  overflow-clip-margin: 4px;
+}
+
+/*
+ * item-view создаёт собственный stacking context (will-change: transform),
+ * поэтому z-index внутреннего элемента не влияет на наложение между соседними
+ * элементами списка. Поднимаем сам item-view, когда внутри активна
+ * highlight-обводка, чтобы соседний selected/focused элемент её не перекрывал.
+ */
+.vue-recycle-scroller__item-view:has(.is-highlighted) {
+  z-index: 1;
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;