6.11.3: Настройки доски внутри селекта

play-life-web/src/components/BoardSelector.css

@@ -15,7 +15,6 @@
 
 .board-header {
   display: flex;
-  gap: 12px;
   align-items: center;
 }
 
@@ -70,48 +69,30 @@
   white-space: nowrap;
 }
 
-.chevron {
-  color: #9ca3af;
-  flex-shrink: 0;
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.chevron.rotated {
-  transform: rotate(180deg);
-}
-
-/* Кнопка действия (настройки/выход) */
-.board-action-btn {
+/* Иконка настроек/выхода внутри pill */
+.pill-action-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 52px;
-  height: 52px;
-  padding: 0;
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  color: #6b7280;
+  width: 32px;
+  height: 32px;
+  margin-left: 4px;
+  border-left: 1px solid #e5e7eb;
+  padding-left: 10px;
+  color: #9ca3af;
   flex-shrink: 0;
+  cursor: pointer;
+  transition: color 0.15s ease;
+  box-sizing: content-box;
 }
 
-.board-action-btn:hover {
-  background: #f9fafb;
-  color: #374151;
-  border-color: #6366f1;
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
-  transform: translateY(-1px);
+.board-pill:hover:not(:disabled) .pill-action-btn,
+.board-pill.open .pill-action-btn {
+  border-left-color: rgba(99, 102, 241, 0.3);
 }
 
-.board-action-btn:active {
-  transform: translateY(0);
-}
-
-.board-action-btn svg {
-  width: 22px;
-  height: 22px;
+.pill-action-btn:hover {
+  color: #4f46e5;
 }
 
 /* Выпадающий список */
@@ -259,3 +240,26 @@
   width: 20px;
   height: 20px;
 }
+
+/* Кнопка настроек/выхода в дропдауне */
+.dropdown-item.board-action-item {
+  margin-top: 2px;
+  padding-top: 14px;
+  border-top: 1px solid #f3f4f6;
+  border-radius: 0 0 12px 12px;
+  color: #6b7280;
+  font-weight: 500;
+  gap: 12px;
+  justify-content: flex-start;
+}
+
+.dropdown-item.board-action-item:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.dropdown-item.board-action-item svg {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}