astuto/app/javascript/stylesheets/components/Board.scss

.boardContainer {
  @extend
    .d-flex,
    .justify-content-between,
    .align-items-start;

  flex-direction: row;

  .sidebar {
    position: sticky;
    top: 20px;

    .sidebarBox {
      width: 250px;
    }
  }

  @media (max-width: 800px) {
    flex-direction: column;

    .sidebar {
      position: relative;
      width: 100%;
      top: 0;

      .sidebarBox {
        width: 100%;
      }
    }
  }

  .sidebarBox {
    @extend
      .d-flex,
      .flex-column,
      .justify-content-start,
      .align-items-center,
      .flex-grow-0,
      .flex-shrink-0;

    border: thin solid black;
    border-radius: 4px;

    margin: 8px;
    padding: 8px;
  }

  .postStatusListItemContainer {
    @extend
      .d-flex,
      .align-self-stretch;
  }

  .postStatusListItemLink {
    @extend
      .flex-grow-1;
  }

  .postStatusListItem {
    @extend
      .p-1;

    height: 40px;

    &:hover {
      cursor: pointer;

      background-color: #f5f5f5;
      border-radius: 4px;
    }
  }

  .resetFilter {
    @extend
      .flex-grow-0,
      .flex-shrink-0,
      .align-self-center,
      .p-0;

    width: 30px;
    height: 30px;
  }

  .postList {
    @extend
      .d-flex,
      .flex-column,
      .flex-grow-1;
  }

  .postLink {
    display: block;
    border-radius: 4px;
    margin: 8px 0;
    color: black;

    &:hover {
      text-decoration: none;
      background-color: #f5f5f5;
    }
  }

  .postListItem {
    @extend
      .d-flex,
      .flex-column,
      .justify-content-between,
      .m-0,
      .px-2,
      .py-1;

    height: 114px;
  }

  .postDetails {
    @extend
      .d-flex,
      .justify-content-between,
      .text-uppercase;
  }
}