[Backport 4.4-7.16] Fix button styling in event view (#5184)

* Fix button styling in event view  (#5137)

* add new style

* add changelog

Co-authored-by: Antonio <34042064+Desvelao@users.noreply.github.com>
(cherry picked from commit 57f0e9f)

* Fix details button style classes

---------

Co-authored-by: Ian Yenien Serrano <63758389+yenienserrano@users.noreply.github.com>
Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com>

CHANGELOG.md

@@ -76,6 +76,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Fixed mispelling in the NIST module [#5107](https://github.com/wazuh/wazuh-kibana-app/pull/5107)
 - Fixed Inventory module for solaris agents [#5144](https://github.com/wazuh/wazuh-kibana-app/pull/5144)
 - Fixed Statistic cronjob bulk document insert [#5150](https://github.com/wazuh/wazuh-kibana-app/pull/5150)
+- Fixed the style of the buttons showing more event information in the event view table. [#5137](https://github.com/wazuh/wazuh-kibana-app/pull/5137)
 
 ### Removed
 

public/kibana-integrations/discover/application/angular/doc_table/components/table_row/_open.scss

@@ -12,3 +12,18 @@
   width: 14px; /* 1 */
   height: 14px;
 }
+
+.euiButtonIcon.euiButtonIcon--open {
+  box-shadow: none;
+  min-height: 24px;
+  min-width: 24px;
+  line-height: 0;
+  transition: all 250ms ease-in-out 0s;
+  border: none;
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    box-shadow: none;
+  }
+}

public/kibana-integrations/discover/application/angular/doc_table/components/table_row/open.html

@@ -1,10 +1,11 @@
 <td ng-click="toggleRow()" data-test-subj="docTableExpandToggleColumn" class="kbnDocTableCell__toggleDetails">
   <button
-    class="euiButtonIcon euiButtonIcon--text"
+    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--open euiButtonEmpty--auto"
     aria-expanded="{{!!open}}"
-    aria-label="{{ ::'discover.docTable.tableRow.toggleRowDetailsButtonAriaLabel' | i18n: {defaultMessage: 'Toggle row details'} }}"
-  >
-    <icon ng-if="open" type="'arrowDown'" size="'s'"></icon>
-    <icon ng-if="!open" type="'arrowRight'" size="'s'"></icon>
+    aria-label="{{ ::'discover.docTable.tableRow.toggleRowDetailsButtonAriaLabel' | i18n: {defaultMessage: 'Toggle row details'} }}">
+    <span class="euiButtonContent euiButtonEmpty__content">
+        <icon ng-if="open" type="'arrowDown'" size="'s'"></icon>
+        <icon ng-if="!open" type="'arrowRight'" size="'s'"></icon>
+    </span>
   </button>
 </td>