update xkit-controls-row styles

Author: marcustyphoon

src/content_scripts/control_buttons.css

@@ -69,18 +69,10 @@
 
   display: flex;
   justify-content: flex-end;
-  column-gap: 4px;
-  padding: 12px 8px;
-}
-
-.xkit-controls-row::after {
-  position: absolute;
-  bottom: 0;
-  left: 12px;
-  right: 12px;
+  gap: 8px;
+  padding: 8px;
 
-  border-bottom: 1px solid rgba(var(--black), .13);
-  content: '';
+  border-bottom: 1px solid var(--content-tint-strong);
 }
 
 @media (max-width: 540px) {

src/features/classic_footer/index.js

@@ -16,12 +16,12 @@ const locale = document.documentElement.lang;
 const noteCountFormat = new Intl.NumberFormat(locale);
 
 export const styleElement = buildStyle(`
-  ${postOwnerControlsSelector} {
+  ${postOwnerControlsSelector}, .xkit-controls-row.xkit-controls-row {
     position: relative;
     gap: 0;
     border-bottom-color: transparent;
   }
-  ${postOwnerControlsSelector}::after {
+  ${postOwnerControlsSelector}::after, .xkit-controls-row.xkit-controls-row::after {
     position: absolute;
     bottom: -1px;
     left: 16px;

src/utils/control_buttons.js

@@ -51,7 +51,7 @@ const addSecondaryFooterRow = postElement => {
     postElement.querySelector(`.${secondaryFooterRowClass}`) ||
     dom('div', { class: secondaryFooterRowClass });
 
-  element.isConnected || postElement.querySelector('footer').before(element);
+  element.isConnected || postElement.querySelector('footer').prepend(element);
   return element;
 };