Update browse menu styles for Tailwind 4 compatibility

Replaced Tailwind CSS @apply directives with explicit class definitions in `templates/components/layout/enhanced_header.html` and removed custom CSS rules from `static/css/components.css` to resolve compatibility issues with Tailwind 4.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c537be14-ffc2-48de-88ef-2bdd9e6ae15a
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/c537be14-ffc2-48de-88ef-2bdd9e6ae15a/pUkRa4J
This commit is contained in:
pac7
2025-09-22 02:07:43 +00:00
parent 09f20c640d
commit 8c85963817
4 changed files with 129 additions and 106 deletions

View File

@@ -238,76 +238,7 @@ body {
@apply relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
}
/* Browse Menu Specific Styles - Using plain CSS to fix @apply errors */
.browse-dropdown {
position: absolute;
left: 0;
margin-top: 0.5rem;
background-color: hsl(var(--background));
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
z-index: 50;
width: 600px !important;
min-width: 600px !important;
}
.browse-dropdown .browse-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem !important;
}
.browse-dropdown .browse-item {
display: flex;
align-items: flex-start;
border-radius: 0.5rem;
transition: background-color 0.2s;
padding: 1rem !important;
gap: 0.75rem !important;
min-height: 4rem;
text-decoration: none;
}
.browse-dropdown .browse-item:hover {
background-color: hsl(var(--accent));
}
.browse-dropdown .browse-icon {
color: hsl(var(--muted-foreground));
width: 1.25rem !important;
height: 1.25rem !important;
flex-shrink: 0 !important;
margin-top: 0.25rem !important;
}
.browse-dropdown .browse-item:hover .browse-icon {
color: hsl(var(--foreground));
}
.browse-dropdown .browse-text {
flex: 1 1 0% !important;
min-width: 0 !important;
overflow: hidden;
}
.browse-dropdown .browse-title {
font-weight: 600;
font-size: 0.875rem;
margin-bottom: 0.375rem !important;
line-height: 1.25 !important;
white-space: normal !important;
word-wrap: break-word !important;
color: hsl(var(--foreground));
}
.browse-dropdown .browse-description {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
line-height: 1.4 !important;
white-space: normal !important;
word-wrap: break-word !important;
}
/* Browse Menu Specific Styles - Removed to fix Tailwind 4 compatibility */
.dropdown-separator {
@apply -mx-1 my-1 h-px bg-muted;