src/features/shorten_posts/index.css
.xkit-shorten-posts-shortened {
  --max-header-height: 44px;
  --max-post-margin: 16px;

  --available-space: calc(100vh - var(--max-header-height));
  --shortened-post-height: calc((var(--available-space) * var(--xkit-shorten-posts-max-height)) - var(--max-post-margin));
  --expand-button-total-height: calc(1rem + (var(--post-header-vertical-padding) * 2));

  position: relative;
}

.xkit-shorten-posts-shortened article {
  position: static;

  overflow-y: hidden;
  overflow-y: clip;
  max-height: var(--shortened-post-height);
}

button.xkit-shorten-posts-expand {
  position: absolute;
  bottom: 0;

  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--expand-button-total-height);
  padding: var(--post-header-vertical-padding) 0;

  background-color: rgb(var(--secondary-accent));
  color: rgb(var(--black));
  cursor: pointer;
  font-size: 1rem;
  line-height: 1rem;
}

.xkit-shorten-posts-tags {
  position: absolute;
  bottom: var(--expand-button-total-height);

  box-sizing: border-box;
  max-height: calc((var(--shortened-post-height) - var(--expand-button-total-height)) / 2);
  width: 100%;
  overflow-y: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 3px dashed rgb(var(--secondary-accent));
  margin: 0;

  background-color: rgb(var(--white));
}

.xkit-shorten-posts-tags [role="button"] {
  display: none;
}
