investigate cut off blocks

Author: grubersjoe

src/components/ActivityCalendar.tsx

@@ -251,8 +251,8 @@ export const ActivityCalendar = forwardRef<HTMLElement, Props>(
 
     function getDimensions() {
       return {
-        width: weeks.length * (blockSize + blockMargin) - blockMargin,
-        height: labelHeight + (blockSize + blockMargin) * 7 - blockMargin,
+        width: weeks.length * (blockSize + blockMargin) - blockMargin + 1, // Add 1px because block outlines are cut off otherwise
+        height: labelHeight + (blockSize + blockMargin) * 7 - blockMargin + 1, // Dito.
       }
     }
 

src/styles/styles.ts

@@ -17,6 +17,7 @@ export const styles = {
       overflowX: 'auto',
       overflowY: 'hidden',
       paddingTop: Math.ceil(0.1 * fontSize), // SVG <text> overflows in Firefox at y=0
+      paddingLeft: 1, // Block outlines on the left are cut off otherwise
     }) satisfies CSSProperties,
   calendar: {
     display: 'block', // SVGs are inline-block by default