QuickAdd input prompt tweaks: shorten on mobile & stretch text field

Custom CSS & Theme Design
1

Sharing a CSS snippet for QuickAdd that fixes two annoyances:

  1. Text field in modal (input prompt) not stretching to full width after a certain window width.

Before
Before4482×1598 201 KB

After
After4482×1598 200 KB

  1. Modal (input prompt) is too tall on mobile (at least on a 6.1 inch iPhone 13).

Before
Before1170×2532 159 KB
After
After1170×2532 165 KB


CSS snippet

[QuickAdd]_Modal_tweaks.css (451 Bytes)

:root {
  --quickadd-input-height: 13rem;
  --quickadd-input-margin: 0.5rem;
}

.quickAddModal textarea {
  width: calc(100% - (var(--quickadd-input-margin) * 2)) !important;
  margin: 0 var(--quickadd-input-margin);
}

@media screen and (max-width: 780px) {
  .wideInputPromptInputEl {
    height: var(--quickadd-input-height);
    min-height: var(--quickadd-input-height); 
    max-height: var(--quickadd-input-height);
  }
}

Happy note-taking!

1 Like
2

Moved to CSS section, mate.

1 Like