Best way to wrap body to not overlap sidebar?

Contribute UX

AI-generated summary

The discussion revolves around preventing content from overlapping the sidebar in a Discourse theme. c0ry is seeking help for a product with a specific layout issue. Chaboi_3000 shares their approach for the 2048 theme, which involves making the main body compact and using a combination of HTML and CSS to achieve the desired layout. They provide example code for the HTML structure and CSS styling, including the use of flexbox for the topic list table.

1

This is the product I have ATM:

I am trying to prevent the content from overlapping the side-bar.

Not sure how I can do that when I’m not able to add “non ending html tags” to one of my custom templates, then ending it on the next template.

2

For my 2048 theme, I make the main body compacted. It’s something like this:

Example Code 
<div class="sidebar">
  
  <p>Code goes here<p>
  
</div>
{{plugin-outlet
  name="before-topic-list-body"
  args=(hash
    topics=topics
    selected=selected
    bulkSelectEnabled=bulkSelectEnabled
    lastVisitedTopic=lastVisitedTopic
    discoveryList=discoveryList
    hideCategory=hideCategory)
  tagName=""
  connectorTagName=""}}
<tbody>
    {{raw "topic-list-header"
      canBulkSelect=canBulkSelect
      toggleInTitle=toggleInTitle
      hideCategory=hideCategory
      showPosters=showPosters
      showLikes=showLikes
      showOpLikes=showOpLikes
      showParticipants=showParticipants
      order=order
      ascending=ascending
      sortable=sortable
      listTitle=listTitle
      bulkSelectEnabled=bulkSelectEnabled}}
  {{#each filteredTopics as |topic|}}
    {{topic-list-item topic=topic
                      bulkSelectEnabled=bulkSelectEnabled
                      showTopicPostBadges=showTopicPostBadges
                      hideCategory=hideCategory
                      showPosters=showPosters
                      showParticipants=showParticipants
                      showLikes=showLikes
                      showOpLikes=showOpLikes
                      expandGloballyPinned=expandGloballyPinned
                      expandAllPinned=expandAllPinned
                      lastVisitedTopic=lastVisitedTopic
                      selected=selected
                      tagsForUser=tagsForUser}}
    {{raw "list/visited-line" lastVisitedTopic=lastVisitedTopic topic=topic}}
  {{/each}}
</tbody>
</script>
CSS 
@import "common/foundation/variables";

.sidebar {
  background: $secondary-high;
  padding: 0 ?em;
  .card {
  background: $whatever;
  height: ?px
  width: ?px;
  padding: ?em;
  margin: ?em 0;
  box-sizing: border-box;
  }
}

table.topic-list {
  display: flex;
}