/* sidebar-fix.css - Fix sidebar width and category name display */

/* Set a strict minimum width for the sidebar */
.sidebar {
  min-width: var(--sidebar-width) !important;
  width: var(--sidebar-width) !important;
  flex-shrink: 0 !important; /* Prevent sidebar from shrinking */
}

/* Ensure category names are properly truncated */
.category-name {
  max-width: 160px !important; /* Leaves room for icons and controls */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Make sure the category controls don't overlap with the name */
.category {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding-right: 45px !important; /* Extra space for controls */
}

.category-controls {
  position: absolute !important;
  right: 10px !important;
  display: flex !important;
  align-items: center !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .sidebar {
    width: 85% !important;
    max-width: 280px !important; /* Slightly wider on mobile for better usability */
  }
  
  .category-name {
    max-width: 180px !important; /* More space for text on mobile sidebar */
  }
}