feat: dialog style enhancements (#127)

* add horizontal padding to dialog

* reduce vertical padding for hr element inside dialog

* add example horizontal rule in dialog

Author: cybardev

index.html

@@ -396,6 +396,7 @@ <h2>What can you build with MVP.css?</h2>
 
         <dialog popover id="dialog-modal">
           <h3>Hello, I am a header of the modal</h3>
+          <hr>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ullam at assumenda cum placeat aperiam ab error, doloribus eligendi sit. Lorem ipsum dolor sit amet consectetur adipisicing
             elit. Quos ullam.

mvp.css

@@ -464,7 +464,8 @@ dialog {
   max-width: 90%;
   max-height: 85dvh;
   margin: auto;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 20px;
   border: 1px solid var(--color-bg-secondary);
   border-radius: 0.5rem;
   overscroll-behavior: contain;
@@ -510,6 +511,10 @@ dialog::backdrop {
   }
 }
 
+dialog hr {
+  margin-block: 1rem;
+}
+
 /* Tables */
 table {
   border: 1px solid var(--color-bg-secondary);