Make the QuickAdd dialog box popup shorter on iOS

[guycalledxan]

What I’m trying to do

I’d like to find a way to reduce the height of the dialog box that QuickAdd uses on mobile (iOS).

The bottom of the box, where the enter button is draws under the keyboard, making it a bit clunky to quickly press enter and move to the next box.

Things I have tried

Not much, sorry. I suspect I need a snippet that overrides these from quickadd:

.quickadd-update-modal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.quickadd-update-modal {
  min-width: 35%;
  max-height: 70%;
}
.quickadd-update-modal img {
  width: 100%;
  height: auto;
  margin: 5px;
}

I don’t know enough about css & how snippets override stuff to be able to case them to only affect mobile.

[guycalledxan]

I just tried adding a snippet with

  .quickadd-update-modal {
    min-width: 35%;
    max-height: 40%;
  }

globally and enabling it on mobile. That didn’t seem to affect any change. Wrong selector maybe.

[guycalledxan]

@media screen and (min-width: 781px) {
    .wideInputPromptInputEl {
        width: 40rem;
        max-width: 100%;
        height: 5rem;
    }
}

That seemed to affect the height in the way I wanted on desktop, where I was testing it to find the right bits to tweak. I didn’t seem to have an effect on mobile though.

[guycalledxan]

Cracked it:

/* 'height' set the height of the textbox on mobile. Will appear next to the keyboard. */
@media screen and (max-width: 540px) and (max-width: 780px) {
    .wideInputPromptInputEl {
        width: 30rem;
        max-width: 100%;
        height: 3rem;
    }
}

At the moment I’m syncing appearance and snippets with Sync, so the snippet is turned on everywhere. I wasn’t really familiar with ‘screen’ - I only use basic css on simple web pages - but I guess the selector is casing the screen size and that block defines a size that’s smaller than my mobile screen width. So I’ve not really solved the platform specific bit directly, rather coincidentally.

I’ll leave the thread open in case someone has the patience to write out how to case for platform, or if I get a moment to dig into it more myself.

[guycalledxan]

I’m also a bit suspicious of “(max-width: 540px) and (max-width: 780px)” - the two max-width properties. I suspect one is meant to be min-width. But that’s how it was written in quickadd.