style.css

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

ol[role="list"],
ul[role="list"] {
  padding: 0;
  list-style: none;
}

#options {
  padding: 0 2ch;
  background-color: #242424;
  position: fixed;
  inset-block-end: 0;
  inset-inline-start: 0;
  border: .0625em solid white;
  border-inline-start: 0;
  border-block-end: 0;
  border-radius: 0 0.975em 0 0;
  width: 30em;
}

.history-wrapper {
  height: 15ex;
  overflow: auto;
}

#color-history thead {
  position: sticky;
  inset-block-start: -.125em;
  background-color: #242424;
}

#color-history li {
  padding: .25em;
  display: flex;
  align-items: center;
  gap: 1ch;
}

#color-history li+li {
  border-block-start: .125em solid currentColor;
}

.swatch {
  flex: 0 0 3ch;
  height: 3ch;
  border: inset .0625em #242424;
}

button[data-action="fill"] {
  font-size: .75rem;
}