fixed quick hit buttons

src/ui/revisionModal.ts

@@ -46,11 +46,12 @@ export class RevisionModal extends Modal {
         contentEl.createEl('h2', { text: 'Revise Text' });
 
         // Quick prompt buttons
-        const quickButtonsSection = contentEl.createDiv({ cls: 'quick-buttons' });
+        const quickButtonsSection = contentEl.createDiv({ cls: 'quick-buttons-grid' });
         CONFIG.SUGGESTION_PROMPTS.forEach((prompt: SuggestionPrompt) => { // Specify type for prompt
-            const buttonContainer = quickButtonsSection.createDiv();
+            const buttonContainer = quickButtonsSection.createDiv({ cls: 'quick-button-container' });
             const button = new ButtonComponent(buttonContainer)
                 .setClass('quick-button')
+                .setClass('mod-cta')  // Add Obsidian's native button class
                 .setButtonText(prompt.type.toUpperCase())
                 .onClick(() => {
                     this.result.instructions = prompt.prompt;
@@ -58,15 +59,15 @@ export class RevisionModal extends Modal {
                     this.close();
                 });
 
-            // Set button style
-            button.buttonEl.style.backgroundColor = prompt.color;
-            button.buttonEl.style.color = 'white';
+            // Set button style using CSS variables
+            button.buttonEl.style.setProperty('--background-modifier-success', prompt.color);
             
-            // Add icon
-            button.buttonEl.createSpan({
+            // Add icon with proper spacing
+            const iconSpan = button.buttonEl.createSpan({
                 cls: 'quick-button-icon',
                 text: prompt.icon
             });
+            button.buttonEl.insertBefore(iconSpan, button.buttonEl.firstChild);
         });
 
         // Instructions input

styles.css

@@ -80,44 +80,33 @@
     max-width: 900px; /* Slightly reduced from 1200px */
 }
 
+.quick-buttons-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    margin: 16px 0;
+    padding: 0 8px;
+}
+
+.quick-button-container {
+    margin: 0;
+}
+
 .quick-button {
-    flex: 0 1 250px; /* Wider buttons */
+    width: 100%;
+    padding: 8px;
     display: flex;
-    flex-direction: row; /* Keep icon and text in a row */
     align-items: center;
     justify-content: center;
     gap: 8px;
-    padding: 16px 24px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-weight: 600;
-    transition: all 0.2s ease;
-    text-align: center;
-    min-width: 0;
-    font-size: 1em;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
-}
-
-.quick-button:hover {
-    filter: brightness(1.1);
 }
 
 .quick-button-icon {
-    font-size: 1.2em;
-    display: block; /* Make icon its own line */
-    margin-bottom: 4px;
+    margin-right: 4px;
 }
 
-.button-container {
-    display: flex;
-    justify-content: flex-end; /* Right align */
-    gap: 8px;
-    margin: 24px 16px 16px;
-    padding-right: 8px;
-}
-
-.button-container button {
-    min-width: 80px;
+.revision-instructions {
+    margin: 16px 0;
 }
 
 .revision-instructions textarea {