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

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

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

      .sidebarBox {
        width: 100%;
      }
    }
  }

  @media (min-width: 801px) {
    flex-direction: row;

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

      .sidebarBox {
        width: 250px;
      }
    }
  }

  .sidebarBox {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

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

    margin: 8px;
    padding: 8px;
  }

  .postStatusListItem {
    height: 40px;

    &:hover {
      cursor: pointer;

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

  .resetFilter {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;

    padding: 0;

    align-self: center;
  }

  .postLink {
    display: block;
    border-radius: 4px;
    margin: 8px 0;
    color: black;
  }
  
  .postLink:hover {
    text-decoration: none;
    background-color: #f5f5f5;
  }

  .postListItem {
    height: 114px;
  }
}