From 884364a93422c134251d79747748165b9b9d5b47 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Thu, 10 Jul 2025 17:28:15 -0400
Subject: [PATCH] style: change action buttons from pills to square emoji
 buttons

- Change border-radius from 20px to 6px for square corners
- Make emoji-only buttons fixed 36x36px squares
- Use grid layout with place-content: center for emoji centering
- Matches the style of emoji buttons used in chat messages
- Reduced padding to 8px for consistent square appearance
---
 src/uncloseai-modal-builtin.css | 8 ++++++--
 src/uncloseai-modal-pico.css    | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css
index bf7a425..770f451 100644
--- a/src/uncloseai-modal-builtin.css
+++ b/src/uncloseai-modal-builtin.css
@@ -699,7 +699,7 @@ dialog#tts-modal {
   padding: 8px 16px;
   background: var(--uncloseai-button-background, #f8f9fa);
   border: 1px solid var(--uncloseai-button-border, #dee2e6);
-  border-radius: 20px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
   color: var(--uncloseai-primary-text, #495057);
@@ -709,7 +709,11 @@ dialog#tts-modal {
 
 .uncloseai-btn-primary.emoji-only {
   font-size: 18px;
-  padding: 8px 12px;
+  padding: 8px;
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-content: center;
 }
 
 .uncloseai-btn-primary:hover {
diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css
index 98da527..6d9ba9b 100644
--- a/src/uncloseai-modal-pico.css
+++ b/src/uncloseai-modal-pico.css
@@ -755,7 +755,7 @@ dialog#tts-modal::backdrop {
   padding: 8px 16px;
   background: var(--uncloseai-button-background, #f8f9fa);
   border: 1px solid var(--uncloseai-button-border, #dee2e6);
-  border-radius: 20px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
   color: var(--uncloseai-primary-text, #495057);
@@ -765,7 +765,11 @@ dialog#tts-modal::backdrop {
 
 .uncloseai-btn-primary.emoji-only {
   font-size: 18px;
-  padding: 8px 12px;
+  padding: 8px;
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-content: center;
 }
 
 .uncloseai-btn-primary:hover {