style: update padding and width in various components for improved layout

- Adjusted padding in TabsBar and Navbar components to enhance spacing. - Updated ItemRenderer and Sortable components to accept itemStyle prop for custom styling. - Changed NotesSidebar scroll behavior from 'smooth' to 'instant'. - Modified MCP server card width to 100% for better responsiveness. - Set wrapperStyle and itemStyle to 100% width in McpServersList for consistent item display.
2026-01-04 20:00:00 +08:00 · 2025-09-24 14:08:12 +08:00 · 2025-09-24 14:08:12 +08:00 · adacb8c638
commit adacb8c638
parent 7a3d08672a
12 changed files with 46 additions and 22 deletions
--- a/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx
+++ b/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx
@ -180,7 +180,7 @@ const PopupContainer: React.FC<Props> = ({ model, filter: baseFilter, showTagFil
        key: `provider-${p.id}`,
        type: 'group',
        name: getFancyProviderName(p),
-        actions: (
+        actions: p.id !== 'cherryai' && (
          <Tooltip title={t('navigate.provider_settings')} mouseEnterDelay={0.5} mouseLeaveDelay={0}>
            <Settings2
              size={12}
--- a/src/renderer/src/components/Tab/TabContainer.tsx
+++ b/src/renderer/src/components/Tab/TabContainer.tsx
@ -302,7 +302,7 @@ const TabsBar = styled.div<{ $isFullscreen: boolean }>`
  flex-direction: row;
  align-items: center;
  gap: 5px;
-  padding-left: ${({ $isFullscreen }) => (!$isFullscreen && isMac ? 'env(titlebar-area-x)' : '15px')};
+  padding-left: ${({ $isFullscreen }) => (!$isFullscreen && isMac ? 'calc(env(titlebar-area-x) + 4px)' : '15px')};
  padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : '0')};
  height: var(--navbar-height);
  min-height: ${({ $isFullscreen }) => (!$isFullscreen && isMac ? 'env(titlebar-area-height)' : '')};
--- a/src/renderer/src/components/app/Navbar.tsx
+++ b/src/renderer/src/components/app/Navbar.tsx
@ -88,6 +88,7 @@ const NavbarCenterContainer = styled.div`
  display: flex;
  align-items: center;
  padding: 0 ${isMac ? '20px' : 0};
+  padding-left: 10px;
  font-weight: bold;
  color: var(--color-text-1);
  position: relative;
@ -108,7 +109,8 @@ const NavbarMainContainer = styled.div<{ $isFullscreen: boolean }>`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
-  padding: 0 ${isMac ? '20px' : 0};
+  padding-right: ${isMac ? '20px' : 0};
+  padding-left: 10px;
  font-weight: bold;
  color: var(--color-text-1);
  padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : isWin ? '140px' : isLinux ? '120px' : '12px')};
--- a/src/renderer/src/components/dnd/ItemRenderer.tsx
+++ b/src/renderer/src/components/dnd/ItemRenderer.tsx
@ -17,6 +17,7 @@ interface ItemRendererProps<T> {
  transform?: Transform | null
  transition?: string | null
  listeners?: DraggableSyntheticListeners
+  itemStyle?: React.CSSProperties
 }

 export function ItemRenderer<T>({
@ -30,6 +31,7 @@ export function ItemRenderer<T>({
  transform,
  transition,
  listeners,
+  itemStyle,
  ...props
 }: ItemRendererProps<T>) {
  useEffect(() => {
@ -44,7 +46,7 @@ export function ItemRenderer<T>({
    }
  }, [dragOverlay])

-  const wrapperStyle = {
+  const style = {
    transition,
    transform: CSS.Transform.toString(transform ?? null)
  } as React.CSSProperties
@ -54,7 +56,7 @@ export function ItemRenderer<T>({
      ref={ref}
      data-index={index}
      className={classNames({ dragOverlay: dragOverlay })}
-      style={{ ...wrapperStyle }}>
+      style={{ ...style, ...itemStyle }}>
      <DraggableItem
        className={classNames({ dragging: dragging, dragOverlay: dragOverlay, ghost: ghost })}
        {...listeners}
--- a/src/renderer/src/components/dnd/Sortable.tsx
+++ b/src/renderer/src/components/dnd/Sortable.tsx
@ -61,6 +61,8 @@ interface SortableProps<T> {
  className?: string
  /** Item list style */
  listStyle?: React.CSSProperties
+  /** Item style */
+  itemStyle?: React.CSSProperties
  /** Item gap */
  gap?: number | string
  /** Restrictions, shortcuts for some modifiers */
@ -87,6 +89,7 @@ function Sortable<T>({
  showGhost = false,
  className,
  listStyle,
+  itemStyle,
  gap,
  restrictions,
  modifiers: customModifiers
@ -195,19 +198,19 @@ function Sortable<T>({
              renderItem={renderItem}
              useDragOverlay={useDragOverlay}
              showGhost={showGhost}
+              itemStyle={itemStyle}
            />
          ))}
        </ListWrapper>
      </SortableContext>

-      {useDragOverlay
-        ? createPortal(
-            <DragOverlay adjustScale dropAnimation={dropAnimation}>
-              {activeItem ? <ItemRenderer item={activeItem} renderItem={renderItem} dragOverlay /> : null}
-            </DragOverlay>,
-            document.body
-          )
-        : null}
+      {useDragOverlay &&
+        createPortal(
+          <DragOverlay adjustScale dropAnimation={dropAnimation}>
+            {activeItem && <ItemRenderer item={activeItem} renderItem={renderItem} itemStyle={itemStyle} dragOverlay />}
+          </DragOverlay>,
+          document.body
+        )}
    </DndContext>
  )
 }
--- a/src/renderer/src/components/dnd/SortableItem.tsx
+++ b/src/renderer/src/components/dnd/SortableItem.tsx
@ -10,6 +10,7 @@ interface SortableItemProps<T> {
  renderItem: RenderItemType<T>
  useDragOverlay?: boolean
  showGhost?: boolean
+  itemStyle?: React.CSSProperties
 }

 export function SortableItem<T>({
@ -18,7 +19,8 @@ export function SortableItem<T>({
  index,
  renderItem,
  useDragOverlay = true,
-  showGhost = true
+  showGhost = true,
+  itemStyle
 }: SortableItemProps<T>) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id
@ -36,6 +38,7 @@ export function SortableItem<T>({
      transform={transform}
      transition={transition}
      listeners={listeners}
+      itemStyle={itemStyle}
      {...attributes}
    />
  )
--- a/src/renderer/src/pages/home/Navbar.tsx
+++ b/src/renderer/src/pages/home/Navbar.tsx
@ -86,7 +86,14 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
        )}
      </AnimatePresence>
      {!showAssistants && (
-        <NavbarLeft style={{ justifyContent: 'flex-start', borderRight: 'none', padding: '0 10px', minWidth: 'auto' }}>
+        <NavbarLeft
+          style={{
+            justifyContent: 'flex-start',
+            borderRight: 'none',
+            paddingLeft: 0,
+            paddingRight: 10,
+            minWidth: 'auto'
+          }}>
          <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={0.8}>
            <NavbarIcon onClick={() => toggleShowAssistants()}>
              <PanelRightClose size={18} />
@ -114,7 +121,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
          justifyContent: 'flex-end',
          flex: 1,
          position: 'relative',
-          paddingRight: isWin || isLinux ? '144px' : '6px'
+          paddingRight: isWin || isLinux ? '144px' : '15px'
        }}
        className="home-navbar-right">
        <HStack alignItems="center" gap={6}>
--- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
@ -410,7 +410,7 @@ const SettingsTab: FC<Props> = (props) => {
          <SettingDivider />
        </SettingGroup>
      </CollapsibleSettingGroup>
-      <CollapsibleSettingGroup title={t('settings.math.title')} defaultExpanded={true}>
+      <CollapsibleSettingGroup title={t('settings.math.title')} defaultExpanded={false}>
        <SettingGroup>
          <SettingRow>
            <SettingRowTitleSmall>{t('settings.math.engine.label')}</SettingRowTitleSmall>
@ -439,7 +439,7 @@ const SettingsTab: FC<Props> = (props) => {
          <SettingDivider />
        </SettingGroup>
      </CollapsibleSettingGroup>
-      <CollapsibleSettingGroup title={t('chat.settings.code.title')} defaultExpanded={true}>
+      <CollapsibleSettingGroup title={t('chat.settings.code.title')} defaultExpanded={false}>
        <SettingGroup>
          <SettingRow>
            <SettingRowTitleSmall>{t('message.message.code_style')}</SettingRowTitleSmall>
@ -583,7 +583,7 @@ const SettingsTab: FC<Props> = (props) => {
        </SettingGroup>
        <SettingDivider />
      </CollapsibleSettingGroup>
-      <CollapsibleSettingGroup title={t('settings.messages.input.title')} defaultExpanded={true}>
+      <CollapsibleSettingGroup title={t('settings.messages.input.title')} defaultExpanded={false}>
        <SettingGroup>
          <SettingRow>
            <SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
--- a/src/renderer/src/pages/notes/NotesSidebar.tsx
+++ b/src/renderer/src/pages/notes/NotesSidebar.tsx
@ -111,7 +111,7 @@ const NotesSidebar: FC<NotesSidebarProps> = ({
              const targetScrollTop = elementOffsetTop - (containerHeight - elementHeight) / 2
              scrollContainer.scrollTo({
                top: Math.max(0, targetScrollTop),
-                behavior: 'smooth'
+                behavior: 'instant'
              })
            }
          }
--- a/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
@ -183,7 +183,7 @@ const CardContainer = styled.div<{ $isActive: boolean }>`
  margin-bottom: 5px;
  height: 125px;
  opacity: ${(props) => (props.$isActive ? 1 : 0.6)};
-  width: calc(100vw - var(--settings-width) - 40px);
+  width: 100%;

  &:hover {
    opacity: 1;
--- a/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
@ -251,7 +251,8 @@ const McpServersList: FC = () => {
        onSortEnd={onSortEnd}
        layout="list"
        horizontal={false}
-        listStyle={{ display: 'flex', flexDirection: 'column' }}
+        listStyle={{ display: 'flex', flexDirection: 'column', width: '100%' }}
+        itemStyle={{ width: '100%' }}
        gap="12px"
        restrictions={{ scrollableAncestor: true }}
        useDragOverlay
--- a/src/renderer/src/pages/translate/TranslatePage.tsx
+++ b/src/renderer/src/pages/translate/TranslatePage.tsx
@ -335,6 +335,12 @@ const TranslatePage: FC = () => {
    setTargetLanguage(source)
  }, [couldExchangeAuto, detectedLanguage, sourceLanguage, t, targetLanguage])

+  // Clear translation content when component mounts
+  useEffect(() => {
+    setText('')
+    setTranslatedContent('')
+  }, [])
+
  useEffect(() => {
    isEmpty(text) && setTranslatedContent('')
  }, [setTranslatedContent, text])