Adding components from right to left

Question

I need to display a list of boxes with maximize, minimize and close button to the bottom right of the screen. The cards should be displayed from bottom right to left. The issue that I am having is cards are getting added from bottom left to right. Say on subsequent clicks of button 1, button 2, button 3 the cards should be in the card3, card2, card1 from bottom because button is clicked first. Here it is happening the other way.

Also I am unable to implement maxmize and minimize function. Cancel operation is working fine.

https://codesandbox.io/s/panel-item-addtion-using-redux-updated-hxmihq?file=/src/components/PanelAdder.jsx

App.tsx

import React from "react";
import { useSelector } from "react-redux";
import Header from "./src/components/Header";
import Footer from "./src/components/Footer";
import Content from "./src/components/Content";
import Panel from "./src/components/Panel";
import "./styles.css";

export default function App() {
  const panels = useSelector((state) => state.panel.panelItems);
  return (
    <>
      <Header />
      <Content />
      <Footer />
      <div className="cards-container">
        {panels.map((name) => (
          <Panel key={name} {...{ name }} />
        ))}
      </div>
    </>
  );
}

PanelAdder

import React from "react";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { addPanel } from "../actions/counterActions";

export default function PanelAdder() {
  const dispatch = useDispatch();
  const panels = useSelector((state) => state.panel.panelItems);

  const handleClick = (name) => {
    if (panels.includes(name)) return;
    dispatch(addPanel(name));
  };

  return (
    <>
      <button onClick={() => handleClick("Panel 1")}> Add Panel 1</button>
      <button onClick={() => handleClick("Panel 2")}> Add Panel 2</button>
      <button onClick={() => handleClick("Panel 3")}> Add Panel 3</button>
    </>
  );
}

Panel

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faSquareMinus,
  faWindowMaximize,
  faRectangleXmark
} from "@fortawesome/free-solid-svg-icons";
import { useDispatch } from "react-redux";
import { deletePanel } from "../actions/counterActions";

export default function Panel({ name }) {
  const dispatch = useDispatch();
  return (
    <>
      <div className="card">
        <div className="card-actions">
          <FontAwesomeIcon icon={faSquareMinus} />
          <FontAwesomeIcon icon={faWindowMaximize} />
          <FontAwesomeIcon
            icon={faRectangleXmark}
            onClick={() => dispatch(deletePanel(name))}
          />
        </div>
        <div className="card-body">{name}</div>
      </div>
    </>
  );
}

Answer 1

.cards-container {
      display: flex;
      /* making element one near the other */
      height: 100vh;
      /* setting the height of div to device_height (so we can put them in the end of the page) */
      align-items: flex-end;
      /* aligning the cards to the end of the page */
      justify-content: flex-start;
      /* aligning the cards to the end of the page */
      padding: 1rem;
      /* adding some padding to the end of the page */
      gap: 1rem;
      /* adding some gap between the cards */
    }

You just had to put justify-content: flex-start here.

Edit

Here is how you can max and min the card window.

https://codesandbox.io/embed/panel-item-addtion-using-redux-updated-forked-n5suqd?fontsize=14&hidenavigation=1&theme=dark

Just use useState to toggle between the two classes. First, set the initial class to be the one you see when you click on the addPanel button. Then, you add an onClick to the min and max buttons. The min button changes the style of the card to the new style, and the max button sets the style of the card back to the original one.