chore(release): bump version to v0.0.2 and update changelog [skip ci]

CHANGELOG.md

@@ -0,0 +1,18 @@
+## [v0.0.2] - 2026-02-21
+
+* feat: Implement responsive styling for various screen sizes and refactor the main todo list container class. (2810044)
+
+## [v0.0.1] - 2026-02-21
+
+* feat: Introduce application version display in the frontend footer, showing both frontend and backend versions with integrated build arguments. (37ae9db)
+* feat: Automate versioning, changelog updates, and Git tagging, using the generated version for Docker image tags. (bbd3beb)
+* feat: Add `https://todo.almazlar.com` to allowed CORS origins. (a606983)
+* refactor: Update TodoController base request mapping from `/todos` to `/api/todos`. (e8be570)
+* refactor: remove `/api` prefix from TodoController request mapping. (d118222)
+* feat: Broaden backend CORS mapping to all paths and update frontend API base URL to production. (ca838b1)
+* refactor: switch to using docker/login-action for container registry authentication (568f662)
+* build: Update Gitea workflow to use `docker login` with `password-stdin` instead of `docker/login-action`. (dd0c2e2)
+* ci: Replace github context variables with gitea context variables in Docker build workflow. (082abfc)
+* feat: Add initial frontend dependencies, base CSS, and Gitea Docker build workflow. (cf58ccb)
+* Initial commit (c8572c5)
+

frontend/src/App.css

@@ -54,6 +54,7 @@
   margin-bottom: 2rem;
   background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
   -webkit-background-clip: text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
@@ -207,4 +208,90 @@
 
 .error {
   color: var(--danger);
+}
+
+/* --- Responsive Design --- */
+
+/* Tablets and small desktops */
+@media (max-width: 768px) {
+  .app-container {
+    padding: 1.75rem;
+    width: 90%;
+    max-width: 600px;
+    min-height: 80vh;
+  }
+
+  .title {
+    font-size: 2.25rem;
+  }
+}
+
+/* Mobile phones */
+@media (max-width: 480px) {
+  .app-container {
+    padding: 1.5rem 1rem;
+    border-radius: 0;
+    margin: 0;
+    width: 100%;
+    max-width: 100%;
+    min-height: 100vh;
+    border: none;
+    box-shadow: none;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .todo-wrapper {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .todo-list {
+    flex-grow: 1;
+  }
+
+  .title {
+    font-size: 1.75rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .todo-form {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .add-btn {
+    padding: 1rem;
+    width: 100%;
+    font-size: 1.05rem;
+    justify-content: center;
+  }
+
+  .todo-item {
+    padding: 0.85rem 0.75rem;
+    border-radius: 10px;
+  }
+
+  .todo-text {
+    font-size: 1rem;
+  }
+
+  .app-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-top: 2rem;
+    padding-bottom: 1rem;
+  }
+
+  .app-footer code {
+    display: inline-block;
+  }
 }

frontend/src/components/TodoList.jsx

@@ -73,7 +73,7 @@ const TodoList = () => {
     };
 
     return (
-        <div className="app-container">
+        <div className="todo-wrapper">
             <h1 className="title">Tasks</h1>
 
             <form className="todo-form" onSubmit={handleCreate}>

frontend/src/index.css

@@ -22,7 +22,7 @@ body {
   font-family: var(--font-family);
   background-color: var(--bg-color);
   background-image: radial-gradient(circle at top right, rgba(139, 92, 246, 0.15), transparent 40%),
-                    radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.15), transparent 40%);
+    radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.15), transparent 40%);
   color: var(--text-main);
   min-height: 100vh;
   display: flex;
@@ -31,6 +31,19 @@ body {
   padding: 4rem 1rem;
 }
 
+@media (max-width: 768px) {
+  body {
+    padding: 2rem 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  body {
+    padding: 0;
+    align-items: flex-start;
+  }
+}
+
 button {
   cursor: pointer;
   font-family: inherit;
@@ -42,4 +55,4 @@ button {
 input {
   font-family: inherit;
   outline: none;
-}
+}