💄🔨 Fixed Sizing on Safari (#1839)

Email thread: ‼️Urgent - Tina.io Homepage - Safari issue

cc: @levijacksonssw

Tailwind gap rendering was behaving differently on safari, causing for
the landing page containers to be overlapping - this pr addresses this
issue by;

- [ ] Enforcing a margin right between on the left container
- [ ] Reducing the command button size 
- [ ] And reducing the size of the left container


<img width="790" alt="Screenshot 2024-06-10 at 7 45 11 pm"
src="https://github.com/tinacms/tina.io/assets/137844305/b47c2fa0-636d-465f-bdb4-3aad55316717">

**Figure: ❌ Overlapping image on safari** 

<img width="1485" alt="Screenshot 2024-06-10 at 7 46 26 pm"
src="https://github.com/tinacms/tina.io/assets/137844305/7d452047-47b9-4d72-8a58-d11f925305f4">

**Figure: ✅ Safari view (from this PR) with fixed spacing** 

_Note that this does make the google chrome sizing (which was test
passed) slightly different_

Co-authored-by: joshua berman <jber4409@uni.sydney.edu.au>

components/blocks/Actions.tsx

@@ -134,7 +134,7 @@ export const CodeButton = ({ children, label, id, ...props }) => {
   return (
     <>
       <button
-        className="button event-cmd-button"
+        className="code-button event-cmd-button"
         onClick={clickEvent}
         id={id}
         {...props}
@@ -178,7 +178,7 @@ export const CodeButton = ({ children, label, id, ...props }) => {
         }
 
         .icon {
-          width: 2.75rem;
+          width: 2.5rem;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -190,21 +190,22 @@ export const CodeButton = ({ children, label, id, ...props }) => {
           transition: opacity 180ms ease-out;
 
           :global(svg) {
-            height: 1.5em;
+            height: 1.5em; 
             width: auto;
           }
         }
 
         .text {
-          padding: 1rem 1.25rem;
+          padding: 0.75rem 1rem; 
+          font-size: 1rem; 
         }
 
-        .button {
+        .code-button {
           display: flex;
           font-weight: bold;
           overflow: hidden;
-          font-size: 1rem;
-          border-radius: 0.5rem;
+          font-size: 1rem; 
+          border-radius: 0.375rem;
           cursor: pointer;
           transition: all 150ms ease-out;
           width: max-content;

components/blocks/Features.tsx

@@ -8,6 +8,7 @@ import playImage from '../../public/img/playButton.png';
 
 export function FeatureBlock({ data, index }) {
   const isReversed = index % 2 === 1;
+  const isVideo = data.media && data.media[0] && data.media[0].src;
 
   return (
     <>
@@ -16,7 +17,7 @@ export function FeatureBlock({ data, index }) {
         className={`relative w-full flex flex-col-reverse items-center lg:justify-center lg:min-h-[70vh] perspective ${isReversed ? 'lg:flex-row-reverse' : 'lg:flex-row'
           }`}
       >
-        <div className="w-full lg:w-3/7 max-w-prose flex flex-col gap-6 lg:gap-8">
+        <div className={`w-full lg:w-3/10 max-w-60ch flex flex-col gap-6 lg:gap-8 ${isVideo ? 'lg:mr-8' : ''}`}>
           {data.headline && (
             <h3
               className="font-tuner inline-block text-3xl sm:pt-8 md:pt-4 lg:pt-0 lg:text-5xl lg:leading-tight bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent text-balance"
@@ -27,7 +28,7 @@ export function FeatureBlock({ data, index }) {
           )}
           <hr className="!my-0" />
           <p
-            className="text-lg lg:text-xl lg:leading-normal block bg-gradient-to-br from-blue-700 via-blue-900 to-blue-1000 bg-clip-text text-transparent -mb-2 max-w-prose text-balance"
+            className="text-lg lg:text-xl lg:leading-normal block bg-gradient-to-br from-blue-700 via-blue-900 to-blue-1000 bg-clip-text text-transparent -mb-2 max-w-60ch text-balance"
             data-tina-field={tinaField(data, 'text')}
           >
             {data.text}
@@ -105,6 +106,10 @@ export function FeatureBlock({ data, index }) {
         )}
       </div>
       <style jsx>{`
+        .max-w-60ch {
+          max-width: 65ch;
+        }
+
         .pane-container {
           perspective: 1000px;
           -moz-perspective: none;
@@ -129,8 +134,6 @@ export function FeatureBlock({ data, index }) {
           text-wrap: balance;
         }
 
-        /* Code Styles */
-
         :global(.hljs) {
           font-size: unquote('clamp(0.75em,0.676em + 0.37vw, 1em)			');
           padding: 1.5em;