move widgets to left, fix some paddings

frontend/app/tab/tabcontent.less

@@ -11,7 +11,7 @@
     justify-content: center;
     overflow: hidden;
     position: relative;
-    padding: 3px;
+    padding: 3px 3px 3px 0;
 
     .block-container {
         display: flex;

frontend/app/workspace/workspace.less

@@ -20,6 +20,7 @@
         flex-direction: column;
         width: 50px;
         overflow: hidden;
+        padding-top: 4px;
 
         .widget {
             display: flex;
@@ -27,10 +28,11 @@
             justify-content: center;
             align-items: center;
             width: 100%;
-            padding: 8px 2px 8px 0;
+            padding: 8px 2px 8px 2px;
             color: var(--secondary-text-color);
             font-size: 20px;
             overflow: hidden;
+            border-radius: 4px;
 
             &:hover:not(.no-hover) {
                 background-color: var(--highlight-bg-color);

frontend/app/workspace/workspace.tsx

@@ -116,8 +116,8 @@ const WorkspaceElem = React.memo(() => {
                     <CenteredDiv>No Active Tab</CenteredDiv>
                 ) : (
                     <>
-                        <TabContent key={activeTabId} tabId={activeTabId} />
                         <Widgets />
+                        <TabContent key={activeTabId} tabId={activeTabId} />
                         <ModalsRenderer />
                     </>
                 )}