fix: avoid left sidebar border covering the workspace outline (#4386)

## Description

- use one border for both upper and lower part of the left sidebar menu
- use box pseudo element instead of border to avoid overlapping 1 px of
the workspace
- make caret visible when user is editing content and parent has an
instance outline from hover

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/builder/builder.tsx

@@ -96,10 +96,6 @@ const SidePanel = ({
         //overflowY: "auto",
         bc: theme.colors.backgroundPanel,
         height: "100%",
-        "&:last-of-type": {
-          // Ensure content still has full width, avoid subpixels give layout round numbers
-          boxShadow: `inset 1px 0 0 0 ${theme.colors.borderMain}`,
-        },
         ...css,
       }}
     >
@@ -410,7 +406,19 @@ export const Builder = ({
           <SidePanel
             gridArea="inspector"
             isPreviewMode={isPreviewMode}
-            css={{ overflow: "hidden" }}
+            css={{
+              overflow: "hidden",
+              // Drawing border this way to ensure content still has full width, avoid subpixels and give layout round numbers
+              "&::after": {
+                content: "''",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                bottom: 0,
+                width: 1,
+                background: theme.colors.borderMain,
+              },
+            }}
           >
             <Inspector navigatorLayout={navigatorLayout} />
           </SidePanel>

apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx

@@ -31,7 +31,8 @@ const baseStyle = css({
   variants: {
     variant: {
       default: {
-        outline: `1px solid ${theme.colors.backgroundPrimary}`,
+        // Semi-transparent color allows user to see the carret when outlining content editable
+        outline: `1px solid oklch(from ${theme.colors.backgroundPrimary} l c h / 0.7) `,
         outlineOffset: -1,
       },
       collaboration: {

apps/builder/app/builder/sidebar-left/sidebar-left.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, type ReactNode } from "react";
-import { Box, Kbd, rawTheme, Text } from "@webstudio-is/design-system";
+import { Kbd, rawTheme, Text } from "@webstudio-is/design-system";
 import { useSubscribe, type Publish } from "~/shared/pubsub";
 import { $dragAndDropState, $isPreviewMode } from "~/shared/nano-states";
 import { Flex } from "@webstudio-is/design-system";
@@ -183,80 +183,79 @@ export const SidebarLeft = ({ publish }: SidebarLeftProps) => {
   });
 
   return (
-    <Flex grow>
-      <SidebarTabs
-        activationMode="manual"
-        value={activePanel}
-        orientation="vertical"
-      >
-        {
-          // In preview mode, we don't show left sidebar, but we want to allow pages panel to be open in the preview mode.
-          // This way user can switch pages without exiting preview mode.
-        }
-        {isPreviewMode === false && (
-          <>
-            <ExternalDragDropMonitor />
-            <div ref={tabsWrapperRef} style={{ display: "contents" }}>
-              <SidebarTabsList>
-                {panels.map(({ name, Icon, label }) => {
-                  return (
-                    <SidebarTabsTrigger
-                      key={name}
-                      label={label}
-                      value={name}
-                      onClick={() => {
-                        toggleActiveSidebarPanel(name);
-                      }}
-                    >
-                      <Icon size={rawTheme.spacing[10]} />
-                    </SidebarTabsTrigger>
-                  );
-                })}
-              </SidebarTabsList>
-            </div>
-
-            <Box css={{ borderRight: `1px solid ${theme.colors.borderMain}` }}>
-              <AiTabTrigger />
-              <HelpTabTrigger />
-            </Box>
-          </>
-        )}
+    <SidebarTabs
+      activationMode="manual"
+      value={activePanel}
+      orientation="vertical"
+    >
+      {
+        // In preview mode, we don't show left sidebar, but we want to allow pages panel to be open in the preview mode.
+        // This way user can switch pages without exiting preview mode.
+      }
+      {isPreviewMode === false && (
+        <Flex
+          grow
+          direction="column"
+          css={{ borderRight: `1px solid ${theme.colors.borderMain}` }}
+        >
+          <ExternalDragDropMonitor />
+          <div ref={tabsWrapperRef} style={{ display: "contents" }}>
+            <SidebarTabsList>
+              {panels.map(({ name, Icon, label }) => {
+                return (
+                  <SidebarTabsTrigger
+                    key={name}
+                    label={label}
+                    value={name}
+                    onClick={() => {
+                      toggleActiveSidebarPanel(name);
+                    }}
+                  >
+                    <Icon size={rawTheme.spacing[10]} />
+                  </SidebarTabsTrigger>
+                );
+              })}
+            </SidebarTabsList>
+          </div>
+          <AiTabTrigger />
+          <HelpTabTrigger />
+        </Flex>
+      )}
 
-        <SidebarTabsContent
-          value={activePanel === "none" ? "" : activePanel}
-          onKeyDown={(event) => {
-            if (event.key === "Escape") {
-              setActiveSidebarPanel("none");
-            }
-          }}
+      <SidebarTabsContent
+        value={activePanel === "none" ? "" : activePanel}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") {
+            setActiveSidebarPanel("none");
+          }
+        }}
+        css={{
+          width: theme.spacing[30],
+          // We need the node to be rendered but hidden
+          // to keep receiving the drag events.
+          visibility:
+            dragAndDropState.isDragging &&
+            dragAndDropState.dragPayload?.origin === "panel" &&
+            getSetting("navigatorLayout") !== "undocked"
+              ? "hidden"
+              : "visible",
+        }}
+      >
+        <Flex
           css={{
-            width: theme.spacing[30],
-            // We need the node to be rendered but hidden
-            // to keep receiving the drag events.
-            visibility:
-              dragAndDropState.isDragging &&
-              dragAndDropState.dragPayload?.origin === "panel" &&
-              getSetting("navigatorLayout") !== "undocked"
-                ? "hidden"
-                : "visible",
+            position: "relative",
+            height: "100%",
+            flexGrow: 1,
+            background: theme.colors.backgroundPanel,
           }}
+          direction="column"
         >
-          <Flex
-            css={{
-              position: "relative",
-              height: "100%",
-              flexGrow: 1,
-              background: theme.colors.backgroundPanel,
-            }}
-            direction="column"
-          >
-            <Panel
-              publish={publish}
-              onClose={() => setActiveSidebarPanel("none")}
-            />
-          </Flex>
-        </SidebarTabsContent>
-      </SidebarTabs>
-    </Flex>
+          <Panel
+            publish={publish}
+            onClose={() => setActiveSidebarPanel("none")}
+          />
+        </Flex>
+      </SidebarTabsContent>
+    </SidebarTabs>
   );
 };

apps/builder/app/builder/sidebar-left/sidebar-tabs.tsx

@@ -18,6 +18,7 @@ export const SidebarTabs = styled(Tabs, {
   alignItems: "center",
   position: "relative",
   boxSizing: "border-box",
+  flexGrow: 1,
 });
 
 const triggerFocusRing = focusRingStyle();
@@ -93,7 +94,6 @@ export const SidebarTabsList = styled(TabsList, {
   flexDirection: "column",
   alignItems: "center",
   outline: "none",
-  borderRight: `1px solid  ${theme.colors.borderMain}`,
   flexGrow: 1,
   backgroundColor: theme.colors.backgroundPanel,
 });
@@ -106,7 +106,14 @@ export const SidebarTabsContent = styled(TabsContent, {
   height: "100%",
   bc: theme.colors.backgroundPanel,
   outline: "none",
-  '&[data-state="active"]': {
-    borderRight: `1px solid ${theme.colors.borderMain}`,
+  // Drawing border this way to ensure content still has full width, avoid subpixels and give layout round numbers
+  "&::after": {
+    content: "''",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 1,
+    background: theme.colors.borderMain,
   },
 });