V2 Icebreakers on mobile devices

Feature Requests
1

Hi

Loving the new V2 offering… the icebreakers though take up too much screen real estate when on a mobile device - I’d like an option to either disable the icebreakers when rendered mobile or to have them rendered like they were on Version 1 whne they took up a single line above the input box.

At present, with V2, each is rendered on its onw line which means the Pickaxe title and image are no longer displayed!

3

Thank you for your feedback! We’re always working hard to improve the customizability of Studio and appreciate you sharing your experience.

There is a way to achieve what you want by using the Website Code Injection tool, which you’ll find in the Settings tab of your Studio dashboard.

To remove icebreakers completely on mobile,
Add this to the header section of your Website Code Injection:

<style>
@media (max-width: 600px) {
  /* Target the parent div for all icebreakers */
  .absolute.bottom-full.right-0 > .flex.flex-col.gap-2.pb-4.px-2.justify-end {
    display: none !important;
  }
}
</style>

To make icebreakers more compact (fit on one line, scrollable) on mobile:

<style>
@media (max-width: 600px) {
  .absolute.bottom-full.right-0 > .flex.flex-col.gap-2.pb-4.px-2.justify-end {
    flex-direction: row !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    padding-bottom: 3vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .absolute.bottom-full.right-0 .group.flex.flex-grow.cursor-pointer {
    min-width: fit-content !important;
    max-width: 300px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 14px 10px !important;
    height: 48px !important;        
    align-items: center !important; 
  }
}
</style>