Skip to content

Commit 3e6bf20

Browse files
authored
Fix unresponsive image height and increased search bar height
1. Fix unresponsive height behavior 2. Increased Search Bar height 3. Added track prefix in front of Track title
1 parent 363e591 commit 3e6bf20

File tree

1 file changed

+13
-12
lines changed

1 file changed

+13
-12
lines changed

apps/web/components/ContentSearch.tsx

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
144144
<span className="sr-only">Close</span>
145145
</DialogClose>
146146
</div>
147-
<div className="h-[400px] py-4 space-y-4 overflow-y-scroll" ref={scrollableContainerRef}>
147+
<div className="h-[500px] py-4 space-y-4 overflow-y-scroll" ref={scrollableContainerRef}>
148148
{searchTracks.length > 0 &&
149149
searchTracks.map((track, index) => (
150150
<div key={track.payload.problemId} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
@@ -155,17 +155,18 @@ export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
155155
passHref
156156
>
157157
<Card className="p-2 w-full mx-2">
158-
<div className="flex my-2">
159-
<img
160-
alt={track.payload.problemTitle}
161-
src={track.payload.image}
162-
className="flex mx-2 w-1/6 rounded-xl"
163-
/>
164-
165-
<div>
166-
<CardHeader>
167-
<CardTitle>{track.payload.problemTitle}</CardTitle>
168-
<CardDescription>{track.payload.trackTitle}</CardDescription>
158+
<div className="flex items-center gap-4 py-1 sm:py-2">
159+
<div className="w-16 h-16 sm:w-20 sm:h-20 flex-shrink-0 overflow-hidden rounded-xl">
160+
<img
161+
alt={track.payload.problemTitle}
162+
src={track.payload.image}
163+
className="w-full h-full object-cover"
164+
/>
165+
</div>
166+
<div className="flex-1 min-w-0">
167+
<CardHeader className="p-0">
168+
<CardTitle className="text-base sm:text-lg md:text-xl">{track.payload.problemTitle}</CardTitle>
169+
<CardDescription className="text-sm truncate">Track: {track.payload.trackTitle}</CardDescription>
169170
</CardHeader>
170171
</div>
171172
</div>

0 commit comments

Comments
 (0)