fix: bug affichage onglet fiche sp (#6817)

* fix: bug affichage onglet fiche sp

* clean

* snap

Author: Viczei

packages/code-du-travail-frontend/src/modules/fiche-service-public/builder/__tests__/__snapshots__/FicheServicePublic.test.tsx.snap

@@ -50,9 +50,7 @@ exports[`<FicheServicePublic /> should render 1`] = `
     CDD
      ou en intérim, des dispositions spécifiques de rupture anticipée du contrat de travail sont prévues. Nous vous présentons les informations à connaître.
   </p>
-  <div
-    class="pos_relative"
-  >
+  <div>
     <div
       class="fr-tabs fr-mb-4w"
       data-fr-js-tabs="true"

packages/code-du-travail-frontend/src/modules/fiche-service-public/builder/components/Tabulator.tsx

@@ -1,10 +1,9 @@
 "use client";
-import React, { useState } from "react";
+import React from "react";
 import { filterOutTitle, getTitleInChildren } from "../utils";
 import { ElementBuilder } from "./ElementBuilder";
 import Title from "./Title";
 import { FicheSPDataBlocCas, FicheSPDataListeSituations } from "../type";
-import { css } from "@styled-system/css";
 
 export const Tabulator = ({
   data,
@@ -13,8 +12,6 @@ export const Tabulator = ({
   data: FicheSPDataBlocCas | FicheSPDataListeSituations;
   headingLevel: number;
 }) => {
-  const [activeTab, setActiveTab] = useState(0);
-
   // Prepare tabs data
   const tabs = data.children.map((tab) => {
     const title = getTitleInChildren(tab);
@@ -34,25 +31,19 @@ export const Tabulator = ({
     };
   });
 
-  // Define container styles
-  const tabsContainerStyle = css({
-    position: "relative",
-  });
-
   return (
-    <div className={tabsContainerStyle}>
-      <div className={`fr-tabs fr-mb-4w`} data-fr-js-tabs="true">
+    <div>
+      <div className="fr-tabs fr-mb-4w" data-fr-js-tabs="true">
         <ul className="fr-tabs__list" role="tablist">
           {tabs.map((tab, index) => (
             <li role="presentation" key={`tab-${index}`}>
               <button
                 id={`tab-${index}`}
-                className={`fr-tabs__tab fr-tabs__tab--icon-left ${index === activeTab ? "fr-tabs__tab--active" : ""}`}
-                tabIndex={index === activeTab ? 0 : -1}
+                className={`fr-tabs__tab fr-tabs__tab--icon-left ${index === 0 ? "fr-tabs__tab--active" : ""}`}
+                tabIndex={index === 0 ? 0 : -1}
                 role="tab"
-                aria-selected={index === activeTab}
+                aria-selected={index === 0}
                 aria-controls={`panel-${index}`}
-                onClick={() => setActiveTab(index)}
               >
                 {tab.label}
               </button>
@@ -64,7 +55,7 @@ export const Tabulator = ({
           <div
             key={`panel-${index}`}
             id={`panel-${index}`}
-            className={`fr-tabs__panel ${index === activeTab ? "fr-tabs__panel--selected" : ""}`}
+            className={`fr-tabs__panel ${index === 0 ? "fr-tabs__panel--selected" : ""}`}
             role="tabpanel"
             aria-labelledby={`tab-${index}`}
             tabIndex={0}

packages/code-du-travail-frontend/src/modules/fiche-service-public/builder/components/__tests__/__snapshots__/Tabulator.test.tsx.snap

@@ -2,9 +2,7 @@
 
 exports[`<Tabulator /> should render 1`] = `
 <div>
-  <div
-    class="pos_relative"
-  >
+  <div>
     <div
       class="fr-tabs fr-mb-4w"
       data-fr-js-tabs="true"