The column layout sidebar (containing journal queries) was not visible on common display setups with browser scaling, forcing users to zoom out which made text hard to read.

Problem

• Plugin required minimum viewport width of 1850px to show the sidebar
• Users with 1920x1080 displays using 1.25x browser scaling have ~1536px effective viewport width
• Sidebar remained hidden in default mode, only appearing when zoomed out (making text unreadable)

Solution

Lowered the minimum width requirement from 1850px to 1400px and added a new responsive breakpoint:

Before:

@media screen and (min-width:1850px) {
  /* Column layout only activated at 1850px+ */
}

After:

@media screen and (min-width:1400px) {
  /* Column layout now activates at 1400px+ */
}

@media screen and (min-width:1400px) and (max-width:1849px) {
  /* New breakpoint for smaller screens */
  margin-right: 300px;
  
  & #today-queries {
    width: 320px;
  }
  
  & div.journal>div.flex.flex-col {
    min-width: 700px
  }
}

Changes Made

• Updated src/css/side.css to use 1400px minimum width and added new breakpoint
• Updated src/css/notSide.css for consistency when linked references are disabled
• Updated documentation in README.md to reflect new requirement

Testing

For a 1920x1080 display with 1.25x scaling:

• Effective viewport width: 1920 ÷ 1.25 = 1536px
• Layout space usage: 700px (journal) + 320px (sidebar) + 300px (margin) = 1320px
• Available space: 1536px ✅ (216px remaining for comfortable layout)

This makes the plugin usable for users with common scaled display configurations without requiring zoom adjustments.

Fixes #28.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.