refactor: make tag management compact and inline with servings

- Moved tags section inline within recipe-meta div
- Positioned tags right next to servings adjuster
- Reduced size significantly - small chips and compact input
- Made input field smaller (150px) with + button
- Removed large bordered section, now blends with meta row
- Uses available whitespace efficiently
- Same visual height as servings control

packages/web/src/App.css

@@ -288,75 +288,53 @@ nav a:hover {
   white-space: nowrap;
 }
 
-/* Quick Tag Management */
-.quick-tags-section {
-  background: var(--bg-tertiary);
-  border: 2px solid var(--border-color);
-  border-radius: 8px;
-  padding: 1.25rem;
-  margin: 1.5rem 0;
-}
-
-.quick-tags-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.quick-tags-header h3 {
-  color: var(--brand-primary);
-  margin: 0;
-  font-size: 1.1rem;
-}
-
-.saving-indicator {
-  font-size: 0.85rem;
-  color: var(--brand-primary);
-  font-style: italic;
-}
-
-.quick-tags-content {
+/* Quick Tag Management - Inline Compact Style */
+.quick-tags-inline {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
+  align-items: flex-start;
 }
 
-.tags-display {
+.tags-display-inline {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
-  min-height: 2rem;
   align-items: center;
+  gap: 0.5rem;
 }
 
-.tag-chip {
+.tags-display-inline strong {
+  color: var(--text-primary);
+  font-size: 0.95rem;
+}
+
+.tag-chip-inline {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
+  gap: 0.3rem;
+  padding: 0.25rem 0.6rem;
   background-color: var(--brand-light);
   color: var(--brand-primary);
-  border-radius: 16px;
-  font-size: 0.9rem;
+  border-radius: 12px;
+  font-size: 0.85rem;
   font-weight: 500;
   transition: background-color 0.2s;
 }
 
-.tag-chip:hover {
+.tag-chip-inline:hover {
   background-color: #d4e8c9;
 }
 
-.tag-remove-btn {
+.tag-remove-btn-inline {
   background: none;
   border: none;
   color: var(--brand-primary);
-  font-size: 1.3rem;
+  font-size: 1.1rem;
   font-weight: bold;
   cursor: pointer;
   padding: 0;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -365,66 +343,69 @@ nav a:hover {
   line-height: 1;
 }
 
-.tag-remove-btn:hover:not(:disabled) {
+.tag-remove-btn-inline:hover:not(:disabled) {
   background-color: rgba(46, 125, 50, 0.2);
 }
 
-.tag-remove-btn:disabled {
+.tag-remove-btn-inline:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.no-tags {
+.no-tags-inline {
   color: var(--text-secondary);
-  font-style: italic;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
 }
 
-.tag-input-container {
+.tag-input-inline {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.4rem;
   align-items: center;
 }
 
-.tag-input {
-  flex: 1;
-  padding: 0.6rem 0.75rem;
-  border: 2px solid var(--border-color);
-  border-radius: 6px;
-  font-size: 0.95rem;
+.tag-input-small {
+  width: 150px;
+  padding: 0.35rem 0.6rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 0.85rem;
   background-color: var(--bg-primary);
   color: var(--text-primary);
   transition: border-color 0.2s;
 }
 
-.tag-input:focus {
+.tag-input-small:focus {
   outline: none;
   border-color: var(--brand-primary);
 }
 
-.tag-input:disabled {
+.tag-input-small:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-.tag-add-btn {
+.tag-add-btn-small {
   background-color: var(--brand-primary);
   color: white;
   border: none;
-  padding: 0.6rem 1.25rem;
-  border-radius: 6px;
-  font-size: 0.95rem;
-  font-weight: 600;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  font-size: 1.1rem;
+  font-weight: bold;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   transition: background-color 0.2s;
-  white-space: nowrap;
+  padding: 0;
 }
 
-.tag-add-btn:hover:not(:disabled) {
+.tag-add-btn-small:hover:not(:disabled) {
   background-color: var(--brand-secondary);
 }
 
-.tag-add-btn:disabled {
+.tag-add-btn-small:disabled {
   background-color: #ccc;
   cursor: not-allowed;
   opacity: 0.6;

packages/web/src/pages/RecipeDetail.tsx

@@ -240,24 +240,19 @@ function RecipeDetail() {
             </div>
           </div>
         )}
-      </div>
 
-      {/* Quick Tag Management */}
-      <div className="quick-tags-section">
-        <div className="quick-tags-header">
-          <h3>Tags</h3>
-          {savingTags && <span className="saving-indicator">Saving...</span>}
-        </div>
-        <div className="quick-tags-content">
-          <div className="tags-display">
+        {/* Quick Tag Management - Inline */}
+        <div className="quick-tags-inline">
+          <div className="tags-display-inline">
+            <strong>Tags:</strong>
             {recipe.tags && recipe.tags.length > 0 ? (
               recipe.tags.map(tag => (
-                <span key={tag} className="tag-chip">
+                <span key={tag} className="tag-chip-inline">
                   {tag}
                   <button
                     onClick={() => handleRemoveTag(tag)}
                     disabled={savingTags}
-                    className="tag-remove-btn"
+                    className="tag-remove-btn-inline"
                     title="Remove tag"
                   >
                     ×
@@ -265,10 +260,10 @@ function RecipeDetail() {
                 </span>
               ))
             ) : (
-              <span className="no-tags">No tags yet. Add one below!</span>
+              <span className="no-tags-inline">—</span>
             )}
           </div>
-          <div className="tag-input-container">
+          <div className="tag-input-inline">
             <input
               type="text"
               value={tagInput}
@@ -279,18 +274,18 @@ function RecipeDetail() {
                   handleAddTag();
                 }
               }}
-              placeholder="Add a tag..."
+              placeholder="Add tag..."
               disabled={savingTags}
               list="available-tags-quick"
-              className="tag-input"
+              className="tag-input-small"
             />
             <button
               onClick={handleAddTag}
               disabled={savingTags || !tagInput.trim()}
-              className="tag-add-btn"
+              className="tag-add-btn-small"
               title="Add tag"
             >
-              + Add
+              +
             </button>
             <datalist id="available-tags-quick">
               {availableTags.map(tag => (