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;
+  flex-direction: column;
-  gap: 12px;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.editor-media-panel {
+  width: 200px;
+  flex-shrink: 0;
 }
 
 .editor-field {

src/renderer/components/Editor/Editor.tsx

@@ -656,26 +656,17 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
       </div>
 
       <div className="editor-content">
-        <div className="editor-meta">
+        <div className="editor-header-row">
-          <div className="editor-field">
+          <div className="editor-meta">
-            <label>Title</label>
+            <div className="editor-field">
-            <input
+              <label>Title</label>
-              type="text"
+              <input
-              value={title}
+                type="text"
-              onChange={(e) => setTitle(e.target.value)}
+                value={title}
-              placeholder="Untitled"
+                onChange={(e) => setTitle(e.target.value)}
-            />
+                placeholder="Untitled"
-          </div>
+              />
-          <div className="editor-field">
+            </div>
-            <label>Slug</label>
-            <input
-              type="text"
-              value={post.slug}
-              disabled
-              className="disabled"
-            />
-          </div>
-          <div className="editor-field-row">
             <div className="editor-field">
               <label>Tags</label>
               <TagInput
@@ -684,25 +675,38 @@ const PostEditor: React.FC<PostEditorProps> = ({ post }) => {
                 placeholder="Add tags..."
               />
             </div>
-            <div className="editor-field">
+            <div className="editor-field-row">
-              <label>Category</label>
+              <div className="editor-field">
-              <select
+                <label>Slug</label>
-                value={category}
+                <input
-                onChange={(e) => setCategory(e.target.value)}
+                  type="text"
-              >
+                  value={post.slug}
-                {availableCategories.map((cat) => (
+                  disabled
-                  <option key={cat} value={cat}>{cat}</option>
+                  className="disabled"
-                ))}
+                />
-              </select>
+              </div>
+              <div className="editor-field">
+                <label>Category</label>
+                <select
+                  value={category}
+                  onChange={(e) => setCategory(e.target.value)}
+                >
+                  {availableCategories.map((cat) => (
+                    <option key={cat} value={cat}>{cat}</option>
+                  ))}
+                </select>
+              </div>
             </div>
+            
+            <PostLinks 
+              postId={post.id}
+              onPostClick={(id) => useAppStore.getState().setSelectedPost(id)}
+            />
           </div>
           
-          <PostLinks 
+          <div className="editor-media-panel">
-            postId={post.id}
+            <LinkedMediaPanel postId={post.id} />
-            onPostClick={(id) => useAppStore.getState().setSelectedPost(id)}
+          </div>
-          />
-          
-          <LinkedMediaPanel postId={post.id} />
         </div>
         
         <div className="editor-body">

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;
+  padding: 2px 4px;
-  font-size: 14px;
+  font-size: 12px;
   border-radius: 3px;
 }
 
@@ -60,16 +59,16 @@
 }
 
 .panel-content {
-  padding: 12px;
+  padding: 8px;
-  max-height: 300px;
+  max-height: 200px;
   overflow-y: auto;
 }
 
 /* Media Grid */
 .linked-media-panel .media-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
+  gap: 6px;
 }
 
 .linked-media-panel .media-item {