UI looks a bit cramped

[ghost]

I think menus and buttons could use some margins.

Made a quick mockup via devtools:

[esm7]

I'll tell you a little secret, in a career of over 20 years of development & management for a living, this plugin is my first-ever take on HTML/CSS UI! And I suck at it for now :laughing: If you want to contribute to the plugin's CSS, I'd be more than happy!

[ghost]

This is the CSS snippet I'm using at the moment, but I'm no good with CSS either so I'm sure you'll find a better way :)

.graph-controls {
  max-width: 220px;
  padding: 8px 8px 2px 8px;
}

.graph-controls input[type='text'], .graph-controls input[type='range'] {
  margin: 4px 0;
  padding: 5px 7px;
}

.graph-controls select.dropdown {
  font-size: 14px;
  margin: 4px 0;
}

/* 'Quick add tag' dropdown */
.graph-controls select.dropdown:nth-child(2) {
  width: 100%;
}

/* 'Default', 'Presets' dropdown */
.graph-controls select.dropdown:nth-child(1) {
  margin: 4px 8px 4px 0;
  width: 48%;
}

/* 'Theme' dropdown */
.graph-controls select.dropdown:nth-of-type(2) {
  width: 48%;
}

/* 'Save as...' button */
.graph-controls button:nth-child(2) {
  width: 48%;
  padding: 8px;
  margin: 0;
}

/* 'Reset', 'Delete' button */
.graph-controls button:nth-child(3) {
  width: 48%;
  padding: 8px;
  margin: 4px 8px 0 0;
}

/* 'Fit' button */
.graph-controls button:nth-child(4) {
  width: 48%;
  padding: 8px;
  margin: 4px 0 0 0;
}

/* 'Save as Default' button */
.graph-controls button:nth-of-type(3) {
  font-size: 11px;
  width: 48%;
  padding: 9px 0;
  margin: 4px 0 0 0;
}