Gestion des liens profonds sur les tabs dans la page DAD

client/src/components/DecisionSupportFilePage/ClarificationSection.tsx

@@ -49,90 +49,88 @@ export const ClarificationSection: FunctionComponent<ClarificationSectionProps>
 
   return (
     <section>
-      <div className="box">
-        <div className="field">
-          <label className="label is-medium">Intitulé du dossier</label>
-          <div className="control">
-            <input className="input is-medium" type="text" readOnly={readOnly} value={dsf.title} onChange={onTitleChange} />
+      <div className="field">
+        <label className="label is-medium">Intitulé du dossier</label>
+        <div className="control">
+          <input className="input is-medium" type="text" readOnly={readOnly} value={dsf.title} onChange={onTitleChange} />
+        </div>
+      </div>
+      <div className="field">
+        <label className="label is-medium">Quelle décision devons nous prendre ?</label>
+        <div className="control">
+          <textarea className="textarea is-medium"
+            readOnly={readOnly}
+            value={state.section.objectives}
+            onChange={onSectionAttrChange.bind(null, 'objectives')}
+            placeholder="Décrire globalement les tenants et aboutissants de la décision à prendre." 
+            rows={10}>
+          </textarea>
+        </div>
+        <p className="help is-info"><i className="fa fa-info-circle"></i> Ne pas essayer de rentrer trop dans les détails ici. Préférer l'utilisation des annexes et y faire référence.</p>
+      </div>
+      <div className="field">
+        <label className="label is-medium">Pourquoi devons nous prendre cette décision ?</label>
+        <div className="control">
+          <textarea className="textarea is-medium"
+            readOnly={readOnly}
+            value={state.section.motivations}
+            onChange={onSectionAttrChange.bind(null, 'motivations')}
+            placeholder="Décrire pourquoi il est important de prendre cette décision." 
+            rows={10}>
+          </textarea>
+        </div>
+        <p className="help is-info"><i className="fa fa-info-circle"></i> Penser à indiquer si des obligations légales pèsent sur cette prise de décision.</p>
+      </div>
+      <div className="field">
+        <label className="label is-medium">Portée de la décision</label>
+        <div className="control">
+          <div className="select is-medium">
+            <select
+              disabled={readOnly}
+              onChange={onSectionAttrChange.bind(null, 'scope')} 
+              value={state.section.scope}>
+              <option></option>
+              <option value="individual">Individuelle</option>
+              <option value="identified-group">Groupe identifié</option>
+              <option value="collective">Collective</option>
+            </select>
           </div>
         </div>
-        <div className="field">
-          <label className="label is-medium">Quelle décision devons nous prendre ?</label>
-          <div className="control">
-            <textarea className="textarea is-medium"
-              readOnly={readOnly}
-              value={state.section.objectives}
-              onChange={onSectionAttrChange.bind(null, 'objectives')}
-              placeholder="Décrire globalement les tenants et aboutissants de la décision à prendre." 
-              rows={10}>
-            </textarea>
-          </div>
-          <p className="help is-info"><i className="fa fa-info-circle"></i> Ne pas essayer de rentrer trop dans les détails ici. Préférer l'utilisation des annexes et y faire référence.</p>
-        </div>
-        <div className="field">
-          <label className="label is-medium">Pourquoi devons nous prendre cette décision ?</label>
-          <div className="control">
-            <textarea className="textarea is-medium"
-              readOnly={readOnly}
-              value={state.section.motivations}
-              onChange={onSectionAttrChange.bind(null, 'motivations')}
-              placeholder="Décrire pourquoi il est important de prendre cette décision." 
-              rows={10}>
-            </textarea>
-          </div>
-          <p className="help is-info"><i className="fa fa-info-circle"></i> Penser à indiquer si des obligations légales pèsent sur cette prise de décision.</p>
-        </div>
-        <div className="field">
-          <label className="label is-medium">Portée de la décision</label>
-          <div className="control">
-            <div className="select is-medium">
-              <select
-                disabled={readOnly}
-                onChange={onSectionAttrChange.bind(null, 'scope')} 
-                value={state.section.scope}>
-                <option></option>
-                <option value="individual">Individuelle</option>
-                <option value="identified-group">Groupe identifié</option>
-                <option value="collective">Collective</option>
-              </select>
-            </div>
+      </div>
+      <div className="field">
+        <label className="label is-medium">Nature de la décision</label>
+        <div className="control">
+          <div className="select is-medium">
+            <select
+              disabled={readOnly}
+              onChange={onSectionAttrChange.bind(null, 'nature')} 
+              value={state.section.nature}>
+              <option></option>
+              <option value="operational">Opérationnelle</option>
+              <option value="tactic">Tactique</option>
+              <option value="strategic">Stratégique</option>
+            </select>
           </div>
         </div>
-        <div className="field">
-          <label className="label is-medium">Nature de la décision</label>
-          <div className="control">
-            <div className="select is-medium">
-              <select
-                disabled={readOnly}
-                onChange={onSectionAttrChange.bind(null, 'nature')} 
-                value={state.section.nature}>
-                <option></option>
-                <option value="operational">Opérationnelle</option>
-                <option value="tactic">Tactique</option>
-                <option value="strategic">Stratégique</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        
-        <div className="columns">
-          <div className="column">
-            <label className="checkbox">
-              <input type="checkbox"
-                className="is-medium"
-                disabled={readOnly}
-                onChange={onSectionAttrChange.bind(null, 'hasDeadline')}
-                checked={state.section.hasDeadline} />
-              <span className="ml-1 has-text-weight-bold is-size-5">Existe t'il une échéance particulière pour cette décision ?</span>
-            </label>
-            <div className="field">
-              <div className="control">
-                <input disabled={!state.section.hasDeadline}
-                  readOnly={readOnly}
-                  value={state.section.deadline ? asDate(state.section.deadline).toISOString().substr(0, 10) : ''}
-                  onChange={onDeadlineChange}
-                  type="date" className="input is-medium" />
-              </div>
+      </div>
+      
+      <div className="columns">
+        <div className="column">
+          <label className="checkbox">
+            <input type="checkbox"
+              className="is-medium"
+              disabled={readOnly}
+              onChange={onSectionAttrChange.bind(null, 'hasDeadline')}
+              checked={state.section.hasDeadline} />
+            <span className="ml-1 has-text-weight-bold is-size-5">Existe t'il une échéance particulière pour cette décision ?</span>
+          </label>
+          <div className="field">
+            <div className="control">
+              <input disabled={!state.section.hasDeadline}
+                readOnly={readOnly}
+                value={state.section.deadline ? asDate(state.section.deadline).toISOString().substr(0, 10) : ''}
+                onChange={onDeadlineChange}
+                type="date" className="input is-medium" />
             </div>
           </div>
         </div>