add new screenshot and overlay

docs/user/general/overview.md

@@ -6,19 +6,39 @@ description: Overview of the web user interface
 draft: false
 ---
 
+import OverviewMarker from "./img/overview/marker.svg";
+
 # OpenCloud - Overview of the web user interface
 
 The OpenCloud web interface consists of several areas that help you to work efficiently with files and settings
 
-<img src={require("./img/overview/overview.png").default} alt="Overview" width="1920"/>
+<div style={{ position: "relative", display: "inline-block", width: "100%", maxWidth: "1920px" }}>
+  <img
+    src={require("./img/overview/overview.png").default}
+    alt="Overview"
+    width="1920"
+    style={{ display: 'block', width: '100%', height: 'auto' }}
+  />
+  <OverviewMarker
+    aria-hidden="true"
+    style={{
+      position: 'absolute',
+      inset: 0,
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none',
+      zIndex: 1,
+    }}
+  />
+</div>
 
 ## 1. Left Sidebar
 
 The sidebar contains the navigation elements such as Spaces, Files, Shares and Settings.
 
 ## 2. App Switcher
 
-The menu in the top left corner allows you to switch between different Apps and modules.
+The menu in the top right corner allows you to switch between different Apps and modules.
 
 ## 3. Top Bar