+11 -3

src/components/Navbar/Navbar.css

Reviewed

··· 283 283 visibility: hidden; 284 284 transform: translateY(-10px); 285 285 transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; 286 286 + display: flex; 287 287 + flex-direction: column; /* Ensure items are in a column */ 286 288 } 287 289 288 290 .dropdown-container:hover .dropdown-menu { ··· 307 309 white-space: nowrap; 308 310 width: 100%; 309 311 box-sizing: border-box; 312 312 + text-align: left; /* Align text to the left */ 310 313 } 311 314 315 315 + /* Adjust hover state for dropdown items */ 312 316 .dropdown-menu li a:hover { 313 317 background-color: rgba(59, 154, 248, 0.1); 314 318 color: #3B9AF8; 319 319 + width: 100%; 315 320 } 316 321 322 322 + /* Ensure that non-dropdown links don't get affected by these changes */ 317 323 .navbar-links ul li a:not(.dropdown-trigger) { 318 318 - padding-right: 0; 319 324 display: inline-block; 320 325 } 321 326 327 327 + /* Extra rule to ensure dropdown container doesn't affect layout */ 328 328 + .dropdown-container { 329 329 + position: relative; 330 330 + } 322 331 323 332 /* Dark mode adjustments for dropdown */ 324 333 .dark-mode .dropdown-menu { ··· 388 397 padding: 0; 389 398 list-style: none; 390 399 margin: 0px; 391 391 - align-items: flex-start; 392 400 } 393 401 394 402 .navbar-links ul li { ··· 490 498 491 499 @media (max-width: 940px) { 492 500 .dropdown-trigger { 493 493 - padding-right: 1.5em; 501 501 + padding-right: 0em; 494 502 } 495 503 496 504 .dropdown-trigger::after {

+12 -15

src/components/Resources/Resources.css

Reviewed

··· 17 17 18 18 /* ======= Redesigned Header Section ======= */ 19 19 .resources-header { 20 20 - margin-bottom: 2rem; 21 20 display: flex; 22 21 flex-direction: column; 23 23 - gap: 1.5rem; 22 22 + gap: 2em; 23 23 + margin-bottom: 2rem; 24 24 + margin-top: 1em; 24 25 } 25 26 26 27 /* Header main section with title and tagline */ ··· 85 86 display: inline-flex; 86 87 gap: 1rem; 87 88 justify-content: center; 88 88 - margin: .5rem 0; 89 89 } 90 90 91 91 /* Improved search input */ ··· 550 550 opacity: 0.8; 551 551 } 552 552 553 553 + #new-toggle:focus { 554 554 + border-color: var(--card-border); 555 555 + } 556 556 + 553 557 @keyframes spin { 554 558 0% { transform: rotate(0deg); } 555 559 100% { transform: rotate(360deg); } ··· 572 576 } 573 577 574 578 .search-filters-container { 575 575 - flex-direction: column; 576 579 align-items: stretch; 580 580 + flex-direction: row; 581 581 + gap: 2.5rem; 577 582 } 578 583 579 584 .search-container { ··· 582 587 583 588 .filter-dropdowns { 584 589 flex-direction: column; 585 585 - align-items: flex-start; 590 590 + align-items: center; 586 591 gap: 1rem; 587 592 } 588 593 ··· 592 597 width: 100%; 593 598 } 594 599 595 595 - .filter-select { 596 596 - width: 100%; 597 597 - } 598 598 - 599 600 .category-filter-dropdown, 600 601 .quality-filter { 601 601 - flex-direction: column; 602 602 - align-items: flex-start; 602 602 + flex-direction: row; 603 603 + align-items: center; 603 604 gap: 0.5rem; 604 605 } 605 606 606 607 .star-filter-container { 607 608 width: 100%; 608 609 justify-content: space-between; 609 609 - } 610 610 - 611 611 - .resources-disclaimer { 612 612 - flex-direction: column; 613 610 } 614 611 615 612 .resources-header h1 {

-17

src/components/Resources/Resources.js

Reviewed

··· 223 223 </button> 224 224 </div> 225 225 </div> 226 226 - 227 227 - <div className="header-features"> 228 228 - <div className="feature-cards"> 229 229 - <div className="feature-card"> 230 230 - <span className="feature-icon">🔍</span> 231 231 - <span className="feature-text">Discover analytics, feeds & clients</span> 232 232 - </div> 233 233 - <div className="feature-card"> 234 234 - <span className="feature-icon">⚡</span> 235 235 - <span className="feature-text">Enhance your Bluesky experience</span> 236 236 - </div> 237 237 - <div className="feature-card"> 238 238 - <span className="feature-icon">🧩</span> 239 239 - <span className="feature-text">Community-built solutions</span> 240 240 - </div> 241 241 - </div> 242 242 - </div> 243 226 244 227 <div className="resources-disclaimer"> 245 228 <div className="disclaimer-icon">⚠️</div>