This repository has no description
fix search bar styling
author
damedotblog
date
(Mar 3, 2025, 12:28 PM -0500)
commit
9c294db3
9c294db33698738938cd4fc02fce8046cf4639a3
parent
4c82ffd9
4c82ffd9da649fedc225c4fb2e959c7b78fc3346
+18
-9
-1
src/components/Admin/AdminPanel.css
-1
src/components/Admin/AdminPanel.css
+18
-8
src/components/Resources/Resources.css
+18
-8
src/components/Resources/Resources.css
···
168
168
.random-resources-section {
169
169
background-color: rgba(var(--button-bg-rgb), 0.05);
170
170
border-radius: 10px;
171
+
padding: 20px;
171
172
margin-top: 20px;
172
173
margin-bottom: 30px;
173
174
border: 2px solid rgba(var(--button-bg-rgb), 0.1);
···
594
595
display: flex;
595
596
gap: 1rem;
596
597
justify-content: center;
597
-
align-items: stretch;
598
+
align-items: center; /* Changed from stretch to center */
599
+
height: 48px; /* Set a fixed height for the container */
598
600
}
599
601
600
602
/* Improved search input */
601
603
.search-container {
602
604
position: relative;
605
+
flex-grow: 1;
606
+
max-width: 500px;
607
+
height: 100%; /* Make it fill the container height */
603
608
}
604
609
605
610
.search-icon {
···
609
614
transform: translateY(-50%);
610
615
font-size: 1rem;
611
616
opacity: 0.6;
617
+
z-index: 1;
612
618
}
613
619
614
620
.search-input {
615
621
width: 100%;
616
-
padding: 12px 12px 12px 40px;
622
+
padding: 0 12px 0 40px; /* Adjusted padding */
617
623
font-size: 1rem;
618
624
border: 2px solid var(--card-border);
619
625
border-radius: 8px;
620
626
background-color: var(--navbar-bg);
621
627
color: var(--text);
622
628
transition: all 0.3s ease;
623
-
height: 100%;
629
+
height: 100%; /* Make it fill the container height */
630
+
box-sizing: border-box; /* Include padding and border in the element's total height */
624
631
}
625
632
626
633
.search-input:focus {
···
633
640
.quick-actions {
634
641
display: flex;
635
642
gap: 0.5rem;
636
-
align-items: stretch;
643
+
height: 100%; /* Make it fill the container height */
637
644
}
638
645
639
646
/* Share button */
···
644
651
gap: 6px;
645
652
background-color: var(--button-bg);
646
653
color: var(--button-text);
647
-
padding: 10px 20px;
654
+
padding: 0 20px; /* Adjusted padding */
648
655
border: none;
649
656
border-radius: 8px;
650
657
font-size: 0.95rem;
651
658
font-weight: 600;
652
659
cursor: pointer;
653
660
transition: all 0.2s ease;
661
+
height: 100%; /* Make it fill the container height */
654
662
}
655
663
656
664
/* Smaller share button in filter row */
657
665
.share-button.compact {
658
-
padding: 8px 14px;
666
+
padding: 0 14px; /* Adjusted padding */
659
667
font-size: 0.85rem;
668
+
height: 36px; /* Fixed height for the compact version */
660
669
}
661
670
662
671
.share-button:hover,
···
681
690
justify-content: center;
682
691
background-color: var(--card-border);
683
692
color: var(--text);
684
-
padding: 10px 20px;
693
+
padding: 0 20px; /* Adjusted padding */
685
694
border: none;
686
695
border-radius: 8px;
687
696
font-size: 0.95rem;
688
697
font-weight: 600;
689
698
cursor: pointer;
690
699
transition: all 0.2s ease;
691
-
height: 100%;
700
+
height: 100%; /* Make it fill the container height */
701
+
white-space: nowrap; /* Prevent text wrapping */
692
702
}
693
703
694
704
/* ======= Filter Controls Container ======= */