fix: show ruler lines checkmark icon is not consistent in safari

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1867,8 +1867,8 @@ function RemoteFunctions(config = {}) {
                     <div class="dropdown-separator"></div>
                     <div class="dropdown-item" data-action="toggle-ruler-lines">
                         <span class="item-icon">${config.icons.ruler}</span>
-                        <span class="item-label">${config.strings.showRulerLines}</span>
-                        <span class="item-checkmark" style="visibility: ${config.showRulerLines ? 'visible' : 'hidden'}">✓</span>
+                        <span class="item-label show-ruler-label">${config.strings.showRulerLines}</span>
+                        <span class="item-checkmark" style="visibility: ${config.showRulerLines ? 'visible' : 'hidden'}">${config.icons.check}</span>
                     </div>
                 </div>
             `;

src/LiveDevelopment/RemoteHelper.js

@@ -180,7 +180,12 @@ define(function (require, exports, module) {
         <svg viewBox="0 0 640 640" fill="currentColor">
             <path d="M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z" />
         </svg>
-      `
+      `,
+
+        check: `
+        <svg viewBox="0 0 640 640" fill="currentColor">
+            <path d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z"/>
+        </svg>`
     };
 
     const optionsBoxStyles = `
@@ -305,6 +310,10 @@ define(function (require, exports, module) {
                     flex: 1 !important;
                 }
 
+                .item-label.show-ruler-label {
+                    margin-top: 1px !important;
+                }
+
                 .dropdown-separator {
                     height: 1px !important;
                     background-color: #4a4a4a !important;
@@ -314,7 +323,19 @@ define(function (require, exports, module) {
                 .item-checkmark {
                     margin-left: auto !important;
                     padding-left: 4px !important;
+                    padding-bottom: 1px !important;
                     font-size: 14px !important;
+                    display: flex !important;
+                    align-items: center !important;
+                    justify-content: center !important;
+                    width: 14px !important;
+                    height: 14px !important;
+                }
+
+                .item-checkmark svg {
+                    width: 14px !important;
+                    height: 14px !important;
+                    display: block !important;
                 }
             `;