From 073ee12f030a299e35228ec1e5c62e56b7c37b8a Mon Sep 17 00:00:00 2001
From: s-choi <choi-suyeong@iij.ad.jp>
Date: Fri, 25 Sep 2026 14:38:38 +0900
Subject: [PATCH] =?UTF-8?q?[STYLE]=20=E3=82=B0=E3=83=A9=E3=83=95=E3=81=AA?=
 =?UTF-8?q?=E3=81=A9=E3=81=AECSS=E7=B5=90=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/templates/goal_view.html | 108 ++++++++++----------
 1 file changed, 55 insertions(+), 53 deletions(-)

diff --git a/src/main/resources/templates/goal_view.html b/src/main/resources/templates/goal_view.html
index 719d946..a7b89ea 100644
--- a/src/main/resources/templates/goal_view.html
+++ b/src/main/resources/templates/goal_view.html
@@ -31,8 +31,10 @@
 		</div>
 
 
-		<div style="width: 600px; height: 300px;">
-			<canvas id="myChart"></canvas>
+		<div class="card shadow-sm mb-3">
+			<div style="height: 400px;">
+				<canvas id="myChart"></canvas>
+			</div>
 		</div>
 
 
@@ -81,6 +83,7 @@
 					options: {
 
 						responsive: true,
+						maintainAspectRatio: false,
 
 						scales: {
 
@@ -101,21 +104,22 @@
 		</script>
 		<!--    -->
 
-		<div>
 
-			<ul>
+		<ul>
 
-				<li th:each="goalForm : ${goalFormList}" class="transaction-item">
+			<li th:each="goalForm : ${goalFormList}" class="transaction-item">
 
-					<div>
+				<div class="d-flex justify-content-between">
 
+					<form th:action="@{/goal}" method="get" class="w-100">
 
-						<form th:action="@{/goal}" method="get">
-							<table class="table">
+						<div class="table-responsive">
+							<table class="table mb-0">
 
 								<input type="radio" name="goalId" th:value="${goalForm.goalId}"
 									th:checked="${graphGoal != null and graphGoal.goalId == goalForm.goalId}"
 									onchange="this.form.submit()">
+
 								<tr>
 									<th>目標名</th>
 									<td th:text="${goalForm.goalTitle}"></td>
@@ -125,10 +129,12 @@
 									<th>目標説明</th>
 									<td th:text="${goalForm.goalSubtitle}"></td>
 								</tr>
+
 								<tr>
 									<th>目標金額</th>
 									<td th:text="${goalForm.targetAmount}"></td>
 								</tr>
+
 								<tr>
 									<th>目標達成期限</th>
 									<td th:text="${goalForm.deadline}"></td>
@@ -138,61 +144,57 @@
 									<th>達成率</th>
 									<td th:text="${goalForm.achievementRate} + '%'"></td>
 								</tr>
+
 							</table>
-						</form>
+						</div>
 
-					</div>
+					</form>
+
+				</div>
+
+				<div class="d-flex justify-content-end gap-2 mt-3">
+
+					<form th:action="@{/goal/edit}" method="get">
+						<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
+
+						<button type="submit" class="btn btn-sm btn-primary">
+							編集
+						</button>
+					</form>
+
+					<form th:action="@{/goal/delete}" method="post">
+						<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
+
+						<button type="submit" class="btn btn-sm btn-danger">
+							削除
+						</button>
+					</form>
+
+				</div>
+
+			</li>
 
 
-					<div class="transaction-buttons">
+		</ul>
 
-						<form th:action="@{/goal/edit}" method="get">
+	</div>
 
-							<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
+	<form th:action="@{/goal/create}" method="get">
 
-							<button type="submit" class="btn btn-sm btn-primary w-100">
-								編集
-							</button>
+		<button type="submit" class="btn btn-success w-100">
+			新規登録
+		</button>
 
-						</form>
+	</form>
+	<form th:action="@{/goal/record}" method="get">
 
+		<button type="submit" class="btn btn-sm btn-primary w-100">
+			履歴
+		</button>
 
-						<form th:action="@{/goal/delete}" method="post">
-
-							<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
-
-							<button type="submit" class="btn btn-sm btn-primary w-100">
-								削除
-							</button>
-
-						</form>
-
-					</div>
-
-				</li>
-
-			</ul>
-
-		</div>
-
-
-		<form th:action="@{/goal/create}" method="get">
-
-			<button type="submit" class="btn btn-sm btn-primary w-100">
-				新規登録
-			</button>
-
-		</form>
-		<form th:action="@{/goal/record}" method="get">
-
-			<button type="submit" class="btn btn-sm btn-primary w-100">
-				履歴
-			</button>
-
-		</form>
-
-
-		<div th:replace="~{footer :: footer}"></div>
+	</form>
+	</div>
+	<div th:replace="~{footer :: footer}"></div>
 
 </body>