Normalize buttons position for cards and modals, and fix cards first and last elements position.

demo/DemoApp.tsx

@@ -32,6 +32,7 @@ import {DemoCurtain} from "./DemoCurtain";
 import {DemoModal} from "./DemoModal";
 import {useCallableModal} from "../src/Components/Modals/Modals";
 import {ModalType} from "../src/Components/Modals/ModalsTypes";
+import {Buttons} from "../src/Components/Buttons/Buttons";
 
 export function DemoApp()
 {
@@ -245,8 +246,10 @@ export function DemoApp()
 					egestas, leo lorem malesuada felis, eu imperdiet orci magna ultrices est.
 				</p>
 
+				<Buttons>
 					<button type={"button"}>Button position ?</button>
 					<button type={"button"}>Button position ?</button>
+				</Buttons>
 			</Card>
 
 			<Card>

demo/DemoModal.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import {Modal, useModal} from "../src/Components/Modals/Modals";
 import {ModalType} from "../src/Components/Modals/ModalsTypes";
+import {Buttons} from "../src/Components/Buttons/Buttons";
 
 export function DemoModal({type}: { type: ModalType; })
 {
@@ -10,7 +11,9 @@ export function DemoModal({type}: { type: ModalType; })
 		<Modal type={type} title={"Modal title"}>
 			Modal test content
 
+			<Buttons>
 				<button onClick={close}>OK</button>
+			</Buttons>
 		</Modal>
 	);
 }

src/Components/Buttons/Buttons.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import {classes} from "../../Utils";
+
+export function Buttons({placement, children}: React.PropsWithChildren<{
+	placement?: "right"|"left"|"center";
+}>)
+{
+	// Default placement: right.
+	placement = placement ?? "right";
+
+	return (
+		<div className={classes("buttons", placement)}>
+			{children}
+		</div>
+	);
+}

src/styles/components/_button.less

@@ -168,3 +168,30 @@ a.button, button, input[type="submit"], input[type="reset"]
 		margin-right: 0.05em;
 	}
 }
+
+div.buttons
+{
+	display: flex;
+	flex-direction: row;
+	gap: 0.5em;
+
+	margin: 0.25em auto;
+
+	&.right
+	{
+		justify-content: flex-end;
+	}
+	&.left
+	{
+		justify-content: flex-start;
+	}
+	&.center
+	{
+		justify-content: center;
+	}
+
+	button, .button
+	{
+		margin: 0;
+	}
+}

src/styles/components/_card.less

@@ -15,21 +15,6 @@
 		margin: 0.33em 0 0.5em 0;
 	}
 
-	button
-	{
-		display: block;
-		margin-left: auto;
-	}
-
-	> :first-child
-	{
-		margin-top: 0;
-	}
-	> :last-child
-	{
-		margin-bottom: 0;
-	}
-
 	&.floating
 	{
 		width: 20em;