fix(styling): various minor visual tweaks and adjustments (#34031)

Author: mistercrunch

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -291,9 +291,9 @@ const StyledDashboardContent = styled.div<{
       width: 0;
       flex: 1;
       position: relative;
-      margin-top: ${theme.sizeUnit * 6}px;
+      margin-top: ${theme.sizeUnit * 4}px;
       margin-right: ${theme.sizeUnit * 8}px;
-      margin-bottom: ${theme.sizeUnit * 6}px;
+      margin-bottom: ${theme.sizeUnit * 4}px;
       margin-left: ${marginLeft}px;
 
       ${editMode &&

superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx

@@ -88,7 +88,7 @@ const VerticalDotsTrigger = () => {
           cursor: pointer;
         }
       `}
-      iconSize="xxl"
+      iconSize="xl"
       iconColor={theme.colorTextLabel}
       className="dot"
     />
@@ -522,6 +522,7 @@ const SliceHeaderControls = (
           aria-haspopup="true"
           css={theme => css`
             padding: ${theme.sizeUnit * 2}px;
+            padding-right: 0px;
           `}
         >
           <VerticalDotsTrigger />

superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx

@@ -96,6 +96,7 @@ const StyledTabsContainer = styled.div`
 
       .ant-tabs-content-holder {
         overflow: visible;
+        margin-top: ${theme.sizeUnit * 4}px;
       }
     }
 

superset-frontend/src/pages/GroupsList/index.tsx

@@ -38,6 +38,7 @@ import {
   ConfirmStatusChange,
   DeleteModal,
 } from '@superset-ui/core/components';
+import { WIDER_DROPDOWN_WIDTH } from 'src/components/ListView/utils';
 
 const PAGE_SIZE = 25;
 
@@ -336,6 +337,7 @@ function GroupsList({ user }: GroupsListProps) {
           value: role.id,
         })),
         loading: loadingState.roles,
+        dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH },
       },
       {
         Header: t('Users'),
@@ -346,6 +348,7 @@ function GroupsList({ user }: GroupsListProps) {
         unfilteredLabel: t('All'),
         fetchSelects: async (filterValue, page, pageSize) =>
           fetchUserOptions(filterValue, page, pageSize, addDangerToast),
+        dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH },
       },
     ],
     [loadingState.roles, roles],

superset-frontend/src/pages/RolesList/index.tsx

@@ -39,6 +39,7 @@ import { isUserAdmin } from 'src/dashboard/util/permissionUtils';
 import { Icons } from '@superset-ui/core/components/Icons';
 import { fetchPaginatedData } from 'src/utils/fetchOptions';
 import { fetchUserOptions } from 'src/features/groups/utils';
+import { WIDER_DROPDOWN_WIDTH } from 'src/components/ListView/utils';
 import { GroupObject } from '../GroupsList';
 
 const PAGE_SIZE = 25;
@@ -312,6 +313,7 @@ function RolesList({ addDangerToast, addSuccessToast, user }: RolesListProps) {
         unfilteredLabel: t('All'),
         fetchSelects: async (filterValue, page, pageSize) =>
           fetchUserOptions(filterValue, page, pageSize, addDangerToast),
+        dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH },
       },
       {
         Header: t('Permissions'),
@@ -325,6 +327,7 @@ function RolesList({ addDangerToast, addSuccessToast, user }: RolesListProps) {
           value: permission.id,
         })),
         loading: loadingState.permissions,
+        dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH },
       },
       {
         Header: t('Groups'),
@@ -338,6 +341,7 @@ function RolesList({ addDangerToast, addSuccessToast, user }: RolesListProps) {
           value: group.id,
         })),
         loading: loadingState.groups,
+        dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH },
       },
     ],
     [permissions, groups, loadingState.groups, loadingState.permissions],

superset-frontend/src/pages/SavedQueryList/index.tsx

@@ -23,7 +23,6 @@ import {
   styled,
   SupersetClient,
   t,
-  css,
 } from '@superset-ui/core';
 import { useCallback, useMemo, useState, MouseEvent } from 'react';
 import { Link, useHistory } from 'react-router-dom';
@@ -200,23 +199,16 @@ function SavedQueryList({
 
   subMenuButtons.push({
     name: (
-      <Link
-        to="/sqllab?new=true"
-        css={css`
-          display: flex;
-          &:hover {
-            color: currentColor;
-            text-decoration: none;
-          }
-        `}
-      >
+      <>
         <Icons.PlusOutlined iconSize="m" />
         {t('Query')}
-      </Link>
+      </>
     ),
     buttonStyle: 'primary',
+    onClick: () => {
+      history.push('/sqllab?new=true');
+    },
   });
-
   if (canCreate) {
     subMenuButtons.push({
       name: (