Align tab headers with document styling

Author: beNative

components/InfoView.tsx

@@ -81,7 +81,7 @@ const InfoView: React.FC<InfoViewProps> = ({ settings }) => {
   return (
     <div className="flex-1 flex flex-col bg-background overflow-hidden min-h-0">
       <header className="flex items-center justify-between px-4 h-7 border-b border-border-color bg-secondary flex-shrink-0">
-        <h1 className="text-xs font-semibold text-text-secondary tracking-[0.2em] uppercase">Application Information</h1>
+        <h1 className="text-xs font-semibold text-text-secondary tracking-wider uppercase">Application Information</h1>
         <nav className="flex items-center gap-1">
           {(Object.keys(docFiles) as DocTab[]).map(tab => (
             <button

components/LoggerPanel.tsx

@@ -119,8 +119,8 @@ const LoggerPanel: React.FC<LoggerPanelProps> = ({ isVisible, onToggleVisibility
         onMouseDown={onResizeStart}
         className="w-full h-1.5 cursor-row-resize flex-shrink-0 bg-border-color/50 hover:bg-primary transition-colors duration-200"
       />
-      <header className="flex items-center justify-between px-2 py-1.5 border-b border-border-color flex-shrink-0 gap-2">
-        <h3 className="text-[11px] font-semibold text-text-main">Application Logs</h3>
+      <header className="flex items-center justify-between px-2 h-7 border-b border-border-color bg-secondary flex-shrink-0 gap-2">
+        <h3 className="text-xs font-semibold text-text-secondary tracking-wider uppercase">Application Logs</h3>
         <div className="flex items-center gap-1.5 flex-wrap justify-end">
           <div className="flex items-center gap-1">
             <span className="text-[10px] text-text-secondary">Level:</span>
@@ -145,7 +145,7 @@ const LoggerPanel: React.FC<LoggerPanelProps> = ({ isVisible, onToggleVisibility
                 className="absolute right-1 top-1/2 -translate-y-1/2 text-[10px] text-text-secondary hover:text-text-main px-1"
                 aria-label="Clear log filter"
               >
-                ×
+                ×
               </button>
             )}
           </div>

components/SettingsView.tsx

@@ -341,17 +341,17 @@ const SettingsView: React.FC<SettingsViewProps> = ({
 
   return (
     <div className="flex-1 flex flex-col bg-background h-full">
-      <header className="flex justify-between items-center p-4 border-b border-border-color flex-shrink-0">
-        <h1 className="text-xl font-semibold text-text-main">Settings</h1>
-        <div className="flex flex-col items-end gap-1">
-          <Button onClick={handleSave} disabled={isSaveDisabled} variant="primary">
-            {isDirty ? 'Save Changes' : 'Saved'}
-          </Button>
+      <header className="flex items-center justify-between px-4 h-7 border-b border-border-color bg-secondary flex-shrink-0">
+        <h1 className="text-xs font-semibold text-text-secondary tracking-wider uppercase">Settings</h1>
+        <div className="flex items-center gap-2">
           {pythonValidationError && (
-            <p className="text-[10px] text-destructive-text max-w-xs text-right">
+            <p className="text-[10px] text-destructive-text max-w-xs text-right leading-tight">
               Python settings error: {pythonValidationError}
             </p>
           )}
+          <Button onClick={handleSave} disabled={isSaveDisabled} variant="primary" className="whitespace-nowrap">
+            {isDirty ? 'Save Changes' : 'Saved'}
+          </Button>
         </div>
       </header>
       <div className="flex-1 flex overflow-hidden">