fix: better screen usage in post editor

src/renderer/components/Editor/Editor.css

@@ -115,10 +115,23 @@
   gap: 16px;
 }
 
+.editor-header-row {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+
 .editor-meta {
   display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.editor-media-panel {
+  width: 200px;
+  flex-shrink: 0;
 }
 
 .editor-field {

src/renderer/components/Editor/Editor.tsx

@@ -656,6 +656,7 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
       </div>
 
       <div className="editor-content">
+        <div className="editor-header-row">
           <div className="editor-meta">
             <div className="editor-field">
               <label>Title</label>
@@ -666,6 +667,15 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
                 placeholder="Untitled"
               />
             </div>
+            <div className="editor-field">
+              <label>Tags</label>
+              <TagInput
+                value={tags}
+                onChange={setTags}
+                placeholder="Add tags..."
+              />
+            </div>
+            <div className="editor-field-row">
               <div className="editor-field">
                 <label>Slug</label>
                 <input
@@ -675,15 +685,6 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
                   className="disabled"
                 />
               </div>
-          <div className="editor-field-row">
-            <div className="editor-field">
-              <label>Tags</label>
-              <TagInput
-                value={tags}
-                onChange={setTags}
-                placeholder="Add tags..."
-              />
-            </div>
               <div className="editor-field">
                 <label>Category</label>
                 <select
@@ -701,9 +702,12 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
               postId={post.id}
               onPostClick={(id) => useAppStore.getState().setSelectedPost(id)}
             />
+          </div>
           
+          <div className="editor-media-panel">
             <LinkedMediaPanel postId={post.id} />
           </div>
+        </div>
         
         <div className="editor-body">
           <div className="editor-toolbar">

src/renderer/components/LinkedMediaPanel/LinkedMediaPanel.css

@@ -5,7 +5,6 @@
 .linked-media-panel {
   background: var(--color-bg-secondary, #252526);
   border-radius: 4px;
-  margin-bottom: 1rem;
 }
 
 .linked-media-panel.collapsed {
@@ -20,20 +19,20 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 12px;
+  padding: 6px 10px;
   border-bottom: 1px solid var(--color-border, #3c3c3c);
   cursor: pointer;
 }
 
 .panel-title {
   font-weight: 600;
-  font-size: 13px;
+  font-size: 12px;
   color: var(--color-text-primary, #ccc);
 }
 
 .panel-actions {
   display: flex;
-  gap: 4px;
+  gap: 2px;
   align-items: center;
 }
 
@@ -42,8 +41,8 @@
   border: none;
   color: var(--color-text-secondary, #8b8b8b);
   cursor: pointer;
-  padding: 2px 6px;
-  font-size: 14px;
+  padding: 2px 4px;
+  font-size: 12px;
   border-radius: 3px;
 }
 
@@ -60,16 +59,16 @@
 }
 
 .panel-content {
-  padding: 12px;
-  max-height: 300px;
+  padding: 8px;
+  max-height: 200px;
   overflow-y: auto;
 }
 
 /* Media Grid */
 .linked-media-panel .media-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-  gap: 8px;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 6px;
 }
 
 .linked-media-panel .media-item {