Refresh and Add Table buttons are difficult to select when scroll bars appear (#315)

Author: VincentZhangy

src/components/layout/ExplorerSidebar.tsx

@@ -925,7 +925,7 @@ export const ExplorerSidebar = ({ sidebarWidth, startResize, onCollapse, sidebar
                               setPendingSchemaSelection(new Set(selectedSchemas));
                               setIsSchemaFilterOpen(!isSchemaFilterOpen);
                             }}
-                            className={`p-1 rounded transition-colors ${
+                            className={`p-1 rounded transition-colors mr-1.5 ${
                               selectedSchemas.length < schemas.length
                                 ? "text-blue-400 hover:text-blue-300 bg-blue-500/10"
                                 : "text-muted hover:text-secondary hover:bg-surface-secondary"
@@ -1375,7 +1375,7 @@ export const ExplorerSidebar = ({ sidebarWidth, startResize, onCollapse, sidebar
                     isOpen={tablesOpen}
                     onToggle={() => setTablesOpen(!tablesOpen)}
                     actions={
-                      <div className="flex items-center gap-1">
+                      <div className="flex items-center gap-1 mr-2.5">
                         <button
                           onClick={(e) => {
                             e.stopPropagation();
@@ -1509,7 +1509,7 @@ export const ExplorerSidebar = ({ sidebarWidth, startResize, onCollapse, sidebar
                     isOpen={viewsOpen}
                     onToggle={() => setViewsOpen(!viewsOpen)}
                     actions={
-                      <div className="flex items-center gap-1">
+                      <div className="flex items-center gap-1 mr-2.5">
                         <button
                           onClick={(e) => {
                             e.stopPropagation();
@@ -1563,7 +1563,7 @@ export const ExplorerSidebar = ({ sidebarWidth, startResize, onCollapse, sidebar
                       isOpen={triggersOpenFlat}
                       onToggle={() => setTriggersOpenFlat(!triggersOpenFlat)}
                       actions={
-                        <div className="flex items-center gap-1">
+                        <div className="flex items-center gap-1 mr-2.5">
                           <button
                             onClick={(e) => {
                               e.stopPropagation();

src/components/layout/sidebar/SidebarDatabaseItem.tsx

@@ -244,7 +244,7 @@ export const SidebarDatabaseItem = ({
                 onToggle={() => setTablesOpen(!tablesOpen)}
                 actions={
                   supportsManageTables(capabilities) ? (
-                  <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1 mr-2.5">
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
@@ -320,7 +320,7 @@ export const SidebarDatabaseItem = ({
                 isOpen={viewsOpen}
                 onToggle={() => setViewsOpen(!viewsOpen)}
                 actions={
-                  <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1 mr-2.5">
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
@@ -365,7 +365,7 @@ export const SidebarDatabaseItem = ({
                   isOpen={triggersOpen}
                   onToggle={() => setTriggersOpen(!triggersOpen)}
                   actions={
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 mr-2.5">
                       <button
                         onClick={(e) => {
                           e.stopPropagation();

src/components/layout/sidebar/SidebarSchemaItem.tsx

@@ -170,7 +170,8 @@ export const SidebarSchemaItem = ({
               e.stopPropagation();
               onRefreshSchema(schemaName);
             }}
-            className="p-0.5 rounded hover:bg-surface-secondary text-muted hover:text-primary transition-colors opacity-0 group-hover/schema:opacity-100"
+            className="p-0.5 rounded hover:bg-surface-secondary text-muted hover:text-primary transition-colors opacity-0
+                group-hover/schema:opacity-100 ml-1 mr-3"
             title={t("sidebar.refreshTables") || "Refresh"}
           >
             <RefreshCw size={12} />
@@ -194,7 +195,7 @@ export const SidebarSchemaItem = ({
                 isOpen={tablesOpen}
                 onToggle={() => setTablesOpen(!tablesOpen)}
                 actions={
-                  <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1 mr-2.5">
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
@@ -267,7 +268,7 @@ export const SidebarSchemaItem = ({
                 isOpen={viewsOpen}
                 onToggle={() => setViewsOpen(!viewsOpen)}
                 actions={
-                  <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1 mr-2.5">
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
@@ -311,7 +312,7 @@ export const SidebarSchemaItem = ({
                   isOpen={triggersOpen}
                   onToggle={() => setTriggersOpen(!triggersOpen)}
                   actions={
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 mr-2.5">
                       <button
                         onClick={(e) => {
                           e.stopPropagation();