Fix revert toggle partial rendering

This commits fixes an issue where the `REVERT` label on revert toggle
might render as `REVER` or in a similarly clipped manner due to its
fixed width. The problem is visible when certain fonts fail to load or
browser engines render content non-standardly.

Changes:
- Refactor UI component to have its own separate Vue component with unit
  tests.
- Rework component design to utilize flexbox, enhancing its adaptability
  and simplifying the structure.
- Remove obselete `webkit` directives.
- Refactor SCSS for clearer structure and better SCSS best-practices.
- Use `em` when possible instead of `px` for improved responsiveness.

tests/e2e/specs/revert-toggle.cy.js

@@ -0,0 +1,50 @@
+describe('revert toggle', () => {
+  context('toggle switch', () => {
+    beforeEach(() => {
+      cy.visit('/');
+      cy.get('.card')
+        .eq(1) // to get 2nd element, first is often cleanup that may lack revert button
+        .click(); // open the card card
+      cy.get('.toggle-switch')
+        .first()
+        .as('toggleSwitch');
+    });
+
+    it('should be visible', () => {
+      cy.get('@toggleSwitch')
+        .should('be.visible');
+    });
+
+    it('should have revert label', () => {
+      cy.get('@toggleSwitch')
+        .find('span')
+        .contains('revert');
+    });
+
+    it('should render label completely without clipping', () => {
+      cy
+        .get('@toggleSwitch')
+        .find('span')
+        .should(($label) => {
+          const text = $label.text();
+          const font = getFont($label[0]);
+          const expectedMinimumTextWidth = getTextWidth(text, font);
+          const containerWidth = $label.parent().width();
+          expect(expectedMinimumTextWidth).to.be.lessThan(containerWidth);
+        });
+    });
+  });
+});
+
+function getFont(element) {
+  const computedStyle = window.getComputedStyle(element);
+  return `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`;
+}
+
+function getTextWidth(text, font) {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  ctx.font = font;
+  const measuredWidth = ctx.measureText(text).width;
+  return measuredWidth;
+}