Refine sidebar control spacing and Works Square surface

tests/e2e/main-navigation.spec.ts

@@ -92,7 +92,8 @@ test.describe('Makelore module navigation without setup flow', () => {
       expect(returnBox).not.toBeNull();
       expect(collapseBox).not.toBeNull();
       expect(returnBox!.y + returnBox!.height).toBeLessThanOrEqual(brandBox!.y);
-      expect(returnBox!.y - sidebarBox!.y).toBeLessThanOrEqual(4);
+      expect(returnBox!.y - sidebarBox!.y).toBe(0);
+      expect(brandBox!.y - sidebarBox!.y).toBe(40);
       expect(returnBox!.width).toBe(32);
       expect(Math.abs(returnBox!.y + returnBox!.height / 2 - collapseBox!.y - collapseBox!.height / 2)).toBeLessThan(1);
       expect(returnBox!.x + returnBox!.width).toBeLessThanOrEqual(collapseBox!.x);
@@ -104,8 +105,10 @@ test.describe('Makelore module navigation without setup flow', () => {
       const createBox = await sidebar.getByTestId('sidebar-create-project').boundingBox();
       const headingBox = await sidebar.locator('.classroom-projects-heading').boundingBox();
       expect(communityBox!.y).toBeGreaterThanOrEqual(brandBox!.y + brandBox!.height);
-      expect(communityBox!.y - brandBox!.y - brandBox!.height).toBeLessThanOrEqual(8);
-      expect(createBox!.y - communityBox!.y - communityBox!.height).toBeGreaterThanOrEqual(16);
+      expect(communityBox!.y - brandBox!.y - brandBox!.height).toBe(10);
+      expect(createBox!.y - communityBox!.y - communityBox!.height).toBe(10);
+      expect(createBox!.y - brandBox!.y - brandBox!.height).toBe(56);
+      await expect(community).toHaveCSS('background-color', 'rgb(232, 240, 223)');
       expect(headingBox!.y).toBeGreaterThanOrEqual(createBox!.y + createBox!.height);
       expect(headingBox!.y - createBox!.y - createBox!.height).toBeLessThanOrEqual(14);
       await page.screenshot({ path: test.info().outputPath('chat-code-return-entry.png') });