V2 Icebreakers on mobile devices

Feature Requests
5

Hi @liveboldtravel,
Thank you for reaching out!

I found a way to keep the icebreakers horizontal and make them scrollable on mobile.

Here’s the code I used:

.absolute.bottom-full.right-0 > .flex.flex-col.gap-2.pb-4.px-2.justify-end {
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100vw !important;
    padding-bottom: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    
    /* Enable smooth scrolling */
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Make the ice breaker items not shrink and have fixed width */
.absolute.bottom-full.right-0 > .flex > .relative {
    flex-shrink: 0 !important;
    min-width: 250px !important; /* Adjust this value as needed */
    max-width: 250px !important;
    width: 250px !important;
}

/* Optional: Hide scrollbar for cleaner look */
.absolute.bottom-full.right-0 > .flex.flex-col.gap-2.pb-4.px-2.justify-end::-webkit-scrollbar {
    height: 4px !important;
}

.absolute.bottom-full.right-0 > .flex.flex-col.gap-2.pb-4.px-2.justify-end::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 2px !important;
}

And here’s a quick demonstration:
temp-temp

If you have any styling requests, feel free to let me know and I’ll be happy to help. Just keep in mind that this type of website code injection depends on the current DOM structure, so if the structure changes, the styling might break and require some small adjustments.

Multiple Chat display issues on Mobile Device