fix: safari clipboard copy issue (#482)

* fix: disable Tailwind preflight to resolve clipboard issues in Safari, add preflight CSS in custom.css, and fix icon scaling

- Disables Tailwind's preflight to address clipboard functionality issues in Safari.
- Adds custom CSS to compensate for the absence of preflight styles.
- Adds `viewBox` attributes to two SVG icons to prevent them from being cut off after disabling preflight.
- Remove extra margin from default Docusaurus styles on h3, fixing community section heading.

Signed-off-by: manasmanohar <[email protected]>

* fix: reset border-radius for images in table cells and disable Roboto Bold to prevent font fallback issues

Signed-off-by: manasmanohar <[email protected]>

---------

Signed-off-by: manasmanohar <[email protected]>
Signed-off-by: Manas Manohar <[email protected]>

Author: manasmanohar

src/components/Community.js

@@ -46,8 +46,8 @@ export const Community = () => {
           >
             <svg
               fill="currentColor"
+              // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
               className="h-12 w-12 flex-none text-red-500 "
-              // Hotfix: Compensate for Tailwind preflight removal causing icon to be cropped
               viewBox="0 0  48 48"
             >
               <rect width="48" height="48" rx="12" />
@@ -96,8 +96,8 @@ export const Community = () => {
           >
             <svg
               fill="currentColor"
+              // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
               className="h-12 w-12 flex-none text-black "
-              // Hotfix: Compensate for Tailwind preflight removal causing icon to be cropped
               viewBox="0 0  48 48"
             >
               <rect width="48" height="48" rx="12" />

src/css/custom.css

@@ -333,6 +333,16 @@ footer svg {
   font-weight: 600;
 }
 
+/* Reset margin bottom on h3 (refer docs community section li item heading) after disabling tailwind preflight. */
+h3{
+  margin-bottom: 1px;
+}
+
+/* Reset any border-radius applied to images inside <td> elements. (see os icons and cross and tick icons in table) */
+td img {
+  border-radius: 0 !important;
+}
+
 .related-read-link {
   margin-left: 7px;
 }
@@ -571,3 +581,144 @@ a[class="breadcrumbs__link"] {
 [data-theme="dark"] th {
   color: white;
 }
+
+/* Hotfix: Manually add Tailwind preflight styles to fix clipboard issues in Safari.
+   Using `preflight: true` caused style conflicts, so these styles are directly included here. */*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: theme('borderColor.DEFAULT', currentColor);
+}
+
+* {
+  margin: 0;
+}
+
+html {
+  height: 100%;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif);
+}
+
+body {
+  height: 100%;
+  line-height: inherit;
+}
+
+img,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+#root,
+#__next {
+  isolation: isolate;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:disabled {
+  cursor: default;
+}
+
+:focus-visible {
+  outline: 2px solid theme('colors.blue.600', #2563eb);
+  outline-offset: 2px;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+textarea {
+  resize: vertical;
+}

tailwind.config.js

@@ -13,11 +13,12 @@ module.exports = {
     "./src/pages/**/*.{js,ts,jsx,tsx}",
     "./src/theme/**/*.{js,ts,jsx,tsx}",
   ],
+  /* Hotfix: Disable Tailwind's preflight to resolve clipboard functionality issues in Safari */
   corePlugins: {
     preflight: false, // to use Docusaurus base styles
     // container: false, // use container style from docusaurus
   },
-  // // important: "#tailwind", // incrementally adopt Tailwind by wrapping pages with <div id="tailwind"> </div>
+  // important: "#tailwind", // incrementally adopt Tailwind by wrapping pages with <div id="tailwind"> </div>
   theme: {
     extend: {
       typography: {
@@ -102,7 +103,7 @@ module.exports = {
       },
       fontFamily: {
         light: ["Roboto Light", "sans"],
-        // hotfix: Remove "Roboto Bold" to prevent fallback to "Times" font due to a potential CSS conflict.
+        /* Disable Roboto Bold to prevent fallback to Times font for highlighted text in the right article index sidebar and h3 elements on the homepage */
         // bold: ["Roboto Bold", "sans"],
       },
       keyframes: {