Fixed grid lines offset

src/components/view/WorkWeek.jsx

@@ -134,10 +134,10 @@ export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses })
                         ))}
 
                         {/* Grid Tracks */}
-                        {[1, 3, 5].map(i => (
+                        {[2, 4, 6].map(i => (
                             <div class="grid-line-h" style={{ '--track': i }}></div>
                         ))}
-                        {[6, 8, 10].map(i => (
+                        {[7, 9, 11].map(i => (
                             <div class="grid-line-h" style={{ '--track': i }}></div>
                         ))}
                     </div>

src/styles/main.scss

@@ -737,7 +737,8 @@ body {
 
         overflow: scroll;
 
-        --event-height: 4.75rem;
+        // --event-height: 4.75rem;
+        --event-height: 6rem;
 
         .pivot {
             height: 3rem;
@@ -777,7 +778,7 @@ body {
             .blocks {
                 display: grid;
 
-                grid-template-rows: repeat(12, calc(var(--event-height) + 1rem));
+                grid-template-rows: repeat(12, calc(var(--event-height)));
 
                 .block {
                     grid-row: var(--start) / span var(--size);
@@ -796,8 +797,12 @@ body {
                         writing-mode: vertical-lr;
                     }
 
+                    &.skip-border {
+                        transform: translate(0, 1px);
+                    }
+
                     &:not(.skip-border) {
-                        height: calc(2 * (var(--event-height) + 1rem) + 1px);
+                        height: calc(2 * var(--event-height) + 1px);
                         border-bottom: 1px solid var(--border-500);
                     }
                 }
@@ -843,9 +848,9 @@ body {
                 grid-template-columns: repeat(var(--size), auto);
                 grid-template-rows: repeat(12, var(--event-height));
 
-                padding: 0.5rem;
+                padding: 0 0.25rem;
 
-                gap: 1rem 0.5rem;
+                // gap: 1rem 0.5rem;
 
                 .event {
                     position: relative;
@@ -868,6 +873,9 @@ body {
                     gap: 0.25rem;
 
                     padding: 0.5rem 1rem 0.5rem 0.5rem;
+                    margin: 0.5rem 0.25rem;
+
+                    // box-sizing: content-box;
 
                     &.selected {
                         background: var(--bg-selected-500);
@@ -900,12 +908,12 @@ body {
 
                 .grid-line-h {
                     grid-column: 1 / span var(--size);
-                    grid-row: var(--track) / span 2;
+                    grid-row: var(--track) / span 1;
 
                     height: 0px;
                     border-bottom: 1px dashed var(--border-500);
 
-                    align-self: center;
+                    // align-self: center;
 
                     position: relative;
                     top: 0.5px;