fix: alert messages too wide in dialogs

czabaj · Sep 12, 2024 · abf3a5e · abf3a5e
1 parent 992b250
commit abf3a5e
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 16 deletions.
diff --git a/src/pages/PlaceSetting/KegDetail.module.css b/src/pages/PlaceSetting/KegDetail.module.css
@@ -12,7 +12,3 @@
 .dialogCloseKeg p:first-of-type {
   font-size: 90%;
 }
-.dialogCloseKeg p:last-of-type {
-  margin-inline: var(--dialog-padding-inline);
-  padding-inline: 2rem;
-}
diff --git a/src/pages/PlaceSetting/KegDetail.res b/src/pages/PlaceSetting/KegDetail.res
@@ -268,10 +268,10 @@ let make = (
           efektivita výtoče.`)}
         </p>
         {effectivity > 0.7
-          ? <p className=Styles.messageBar.base>
+          ? <p className=Styles.messageBar.base role="alert">
               {React.string(`Rozúčtování je nevratná operace. Ujistěte se, že máte správny sud.`)}
             </p>
-          : <p className={`${Styles.messageBar.base} ${Styles.messageBar.variantDanger}`}>
+          : <p className={Styles.messageBar.variantDanger} role="alert">
               <b> {React.string(`Efektivita výtoče je velmi nízká.`)} </b>
               {React.string(` Rozúčtování je nevratná operace. Ujistěte se, že máte správny sud.`)}
             </p>}

diff --git a/src/pages/PlaceSetting/PlaceDelete.res b/src/pages/PlaceSetting/PlaceDelete.res
@@ -2,7 +2,6 @@ type classesType = {root: string}
 
 @module("./PlaceDelete.module.css") external classes: classesType = "default"
 
-
 module FormFields = {
   type state = {name: string}
   type rec field<_> = Name: field<string>
@@ -47,11 +46,10 @@ let make = (~onConfirm, ~onDismiss, ~placeName) => {
     onDismiss={onDismiss}
     visible=true>
     <Form.Provider value=Some(form)>
-      <p>
-        {React.string(`Pokud si přejete smazat místo, napište jeho název a potvrďte. `)}
-        <strong>
-          {React.string(`Smazání místa je nevratná operace, tímto ztratíte veškeré údaje o místu a nepůjdou vrátit zpět!`)}
-        </strong>
+      <p> {React.string(`Pokud si přejete smazat místo, napište jeho název a potvrďte. `)} </p>
+      <p className={Styles.messageBar.variantDanger} role="alert">
+        <strong> {React.string(`Smazání místa je nevratná operace!`)} </strong>
+        {React.string(` Tímto ztratíte veškeré údaje o místu a nepůjdou vrátit zpět`)}
       </p>
       <form id="place_delete" onSubmit={ReForm__Helpers.handleSubmit(form.submit)}>
         <fieldset className={`reset ${Styles.fieldset.grid}`}>

diff --git a/src/styles/components/messageBar.module.css b/src/styles/components/messageBar.module.css
@@ -23,3 +23,9 @@
 .variantDanger::before {
   content: "🚨 ";
 }
+
+dialog .base {
+  margin-inline: var(--dialog-padding-inline);
+  padding-inline-end: 0.75rem;
+  padding-inline-start: calc(0.5rem + 3ch);
+}
diff --git a/src/styles/reset.css b/src/styles/reset.css
@@ -38,10 +38,7 @@ dialog:modal {
   color: var(--text-2);
 }
 
-dl,
-dl dd,
-p,
-[popover] {
+:where(dl, dl dd, p, [popover]) {
   margin: 0;
   padding: 0;
   border: 0;