User:ChaseT/vector-2022.css

/* Ensure the main container allows for a flex display */
.mw-workspace-container {
  display: flex;
  justify-content: center; /* Center the flex items (content and sidebar) */
  flex-wrap: wrap; /* Allow items to wrap if needed on small screens */
}

/* Set the base width of the content to 780 pixels and center it */
#content {
  flex: 1; /* Allow the content to be flexible */
  max-width: 780px; /* Maximum width of the content */
  margin: 0 20px; /* Add some space between the content and the sidebar */
}

/* Ensure the sidebar hugs the content */
#mw-panel {
  flex: 0 0 auto; /* Do not grow, do not shrink, auto basis */
  padding-right: 20px; /* Add some space between the sidebar and content */
}

/* Adjust the layout for smaller screens */
@media (max-width: 780px) { /* Adjust this value as needed */
  #content {
    flex-basis: auto; /* Allow content to adjust its size */
    margin: 0; /* Remove margin to utilize full width */
    max-width: 100%; /* Allow content to fill the smaller viewport */
    width: 100%; /* Use full viewport width */
  }
}