Refactor ChatMessage CSS for consistent button styling

Author: ngafar

mito-ai/style/ChatMessage.css

@@ -56,72 +56,73 @@
     align-items: center;
 }
 
+/* Message Action Buttons Container */
 .message-action-buttons {
-    position: absolute !important;
-    bottom: 8px !important;
-    right: 8px !important;
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
     display: flex;
+    border-radius: 4px;
+    overflow: hidden;  /* Ensures inner buttons don't break the rounded corners */
 }
 
-.message-action-buttons button {
+/* Common styles for action buttons */
+.message-action-buttons button,
+.message-start-editing-button {
     cursor: pointer;
     opacity: 0;
     transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
     background-color: var(--jp-layout-color3);
     border: none;
-    padding: 0px;
-    border-radius: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--grey-900) !important;
-    width: 28px;
-    height: 28px;
-    position: relative;
-}
-
-.message-action-buttons button svg {
     color: var(--jp-content-font-color1);
 }
 
-.message-action-buttons button:first-child {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-}
-
-.message-action-buttons button:last-child {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
+/* Action buttons in the group */
+.message-action-buttons button {
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: 0; /* Remove individual button radius */
 }
 
-.message-action-buttons button:hover {
-    background-color: var(--jp-layout-color4);
+/* Add subtle separator between buttons */
+.message-action-buttons button:not(:last-child) {
+    border-right: 1px solid var(--jp-border-color1);
 }
 
-.message:hover .message-action-buttons button {
-    opacity: 1 !important;
+/* Remove the individual button radius styles since we're handling it at the container level */
+.message-action-buttons button:first-child,
+.message-action-buttons button:last-child {
+    border-radius: 0;
 }
 
+/* Standalone edit button */
 .message-start-editing-button {
-    position: relative !important;
-    bottom: unset !important;
-    right: unset !important;
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
-    background-color: var(--jp-layout-color3);
-    border: none;
+    position: relative;
     padding: 4px;
     border-radius: 4px;
-    display: flex;
-    align-items: center;
-    color: var(--jp-content-font-color1) !important;
 }
 
+/* SVG icon color */
+.message-action-buttons button svg {
+    color: var(--jp-content-font-color1);
+}
+
+/* Hover states */
+.message-action-buttons button:hover,
 .message-start-editing-button:hover {
     background-color: var(--jp-layout-color4);
 }
 
+/* Show buttons on message hover */
+.message:hover .message-action-buttons button,
+.message:hover .message-start-editing-button {
+    opacity: 1;
+}
+
 .message-edit-buttons {
     display: flex;
     gap: 8px;