So I come up with a way better solution, remember that I'm not a JS/CSS dev at all. This is done through some flex container manipulation, height manipulation and :hover magic.

It hides the sidebar below the main panel, and by hovering the grey rectangle it allows you to show it. I find it to work really well.

.main_pane, #side_pane {
  order: 1;
  width: 90%;
  max-width: unset !important;
  margin: 0 auto !important;
  overflow-y: hidden;
}

#side_pane {
  order: 0;
  
  display: flex;
  
  flex-direction: row;
  flex-wrap: wrap;
  
  margin-top: 1rem !important;
  gap: 1em 0.5em;
  
  height: 3rem;
}

#side_pane:before {
    display: block;
    content: close-quote;
    height: 3em;
    width: 95%;
    margin: 0 auto;
    background-color: #eee;
}
  
#side_pane .card {
    order: 1;
    margin-top: unset !important;
    height: fit-content;
    max-width: calc(100% - 1em);
    width: 100%;
}
  
#side_pane .card#about_community {
    order: 0;
    width: 100%;
}

#side_pane:hover {
    height: unset;
    margin-bottom: 1rem !important;
}
    
#side_pane:hover:before {
  display: none;
}

PieFed custom CSS system doesn't allow & and ' symbols, which is pretty inconvenient for recursives selectors and for content clauses.