Eiche fam

I had set a reminder in one of my notes, but I noticed something wrong. The note showed the reminder in the list view, but it was missing from the single note view.

Upon further investigation, I found that it was a bug of my own making. I had written this CSS:

.#{$note-container} {
  height: calc(100% - #{$note-toolbar-height});
}

This was to expand the size of the note in the single note view to take up the entire panel, instead of leaving an unusable margin in the top and bottom. The problem was, I had assumed the height of the toolbar was constant. I didn’t realize at the time that its size would change if a reminder was set.

What I needed was not a constant value, but a dynamic one. Keep doesn’t assign a new class to a note when a reminder is set, so I couldn’t use that to override the height of the note container.

In times past, I might have considered using a table layout (assigned entirely through CSS). But the flexbox specs are pretty well settled now, and since this is Chrome, I don’t have to worry about supporting other browsers, much less older ones.

Using flexbox, we can allow the note toolbar to have a variable height, and set the note container (which holds the note title and text) to adjust its height to fill up the remainder of the screen.

.#{$note-wrapper} {
  display: flex;
  flex-flow: column;
}

.#{$note-container} {
  flex: 1 1 auto;
}

.#{$note-toolbar} {
  flex: 0 1 auto;
}

With that in place, we get this: