Feature Request: list view in Identify

[nwgat]

would been nice, its really hard to find stuff with long names

here is a working vibe code example that can be put in custom css

/* --- JELLYFIN IDENTIFY DIALOG OVERRIDE --- */

/* 1. Header Fixes (Targeting the Dialog Header specifically) */
.identifyDialog .formDialogHeader {
    z-index: 9999 !important;
    position: sticky !important;
    top: 0 !important;
    background: rgba(16, 16, 16, 0.95) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Added separator for clarity */
}

/* 2. Target the container inside the Identify Dialog */
.identifyDialog .itemsContainer.vertical-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    padding-top: 10px !important;
}

/* 3. Reset the card width to take up the full row */
.identifyDialog .itemsContainer.vertical-wrap .card {
    width: 100% !important;
    margin: 0 !important;
}

/* 4. Create the Flexbox layout (Image Left - Text Right) */
.identifyDialog .itemsContainer.vertical-wrap .cardBox {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 10px;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

/* Hover effect */
.identifyDialog .itemsContainer.vertical-wrap .cardBox:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 5. Style the Image Thumbnail */
.identifyDialog .itemsContainer.vertical-wrap .cardScalable {
    width: 100px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    margin-right: 20px !important;
    padding-bottom: 0 !important;
}

/* Remove the aspect ratio spacer */
.identifyDialog .itemsContainer.vertical-wrap .cardPadder {
    display: none !important;
}

/* Ensure the inner image fills the scalable container */
.identifyDialog .itemsContainer.vertical-wrap .cardImageContainer {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2/3;
    border-radius: 6px;
}

/* 6. Style the Text Content */
.identifyDialog .itemsContainer.vertical-wrap .cardContent {
    text-align: left !important;
    width: auto !important;
    flex-grow: 1 !important;
    padding: 0 !important;
}

/* Make the Title bigger and bolder */
.identifyDialog .itemsContainer.vertical-wrap .cardText.cardTextCentered.cardText-first {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 5px;
    text-align: left !important;
}

/* Style the secondary text */
.identifyDialog .itemsContainer.vertical-wrap .cardText.cardTextCentered.cardText-secondary {
    text-align: left !important;
    opacity: 0.7;
}

/* Mobile Adjustments */
@media all and (max-width: 50em) {
    .identifyDialog .itemsContainer.vertical-wrap .cardScalable {
        width: 70px !important;
        margin-right: 15px !important;
    }
    .identifyDialog .itemsContainer.vertical-wrap .cardText.cardTextCentered.cardText-first {
        font-size: 1em;
    }
}