refactor(classroom): クラス管理の各画面を画面遷移＋共通レイアウトに統一する（#1108）

packages/scratch-gui/src/components/classroom-modal/classroom-modal.css

@@ -559,6 +559,19 @@
     margin-top: 1.5rem;
 }
 
+/* フッター右側のグループ（例: アーカイブ + 保存 を右寄せで並べる）。 */
+.footer-right-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* 評価画面: キャンセルをアクションボタン行の左端に置く（右寄せの他ボタンと
+   同じ行で左に離す。レビュー指摘）。 */
+.eval-cancel {
+    margin-right: auto;
+}
+
 /* 共有設定ステップ（#1109）: 公開範囲の選択カード + 合言葉の表示。 */
 .share-mode-row {
     display: flex;
@@ -2924,21 +2937,29 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     overflow-y: auto;
 }
 
+/* クラス名を独立行にしたので、ヘッダーはアクションボタンの折り返し行にする
+   （左寄せ・省略しない。レビュー指摘 #1108）。 */
 .board-header {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
 }
 
 .board-title {
-    flex: 1;
-    margin: 0;
+    margin: 0.25rem 0 0.25rem;
     font-size: 1.3rem;
+    font-weight: bold;
     color: #575e75;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+}
+
+/* 課題一覧（ボード）の簡単な説明。 */
+.board-hint {
+    font-size: 0.85rem;
+    color: #888;
+    line-height: 1.5;
+    margin: 0 0 0.75rem;
 }
 
 .board-year {

packages/scratch-gui/src/components/classroom-modal/shared-assignment-catalog.jsx

@@ -4,6 +4,7 @@
  * manage the caller's own posts (unlist / republish). Supplement URLs open
  * behind an explicit confirmation that names the external domain (D4).
  */
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -390,16 +391,18 @@ const SharedAssignmentCatalog = ({ group, isLoading, shared }) => {
                 </h3>
                 <button data-testid="shared-catalog-close" type="button" onClick={shared.handleCloseCatalog}>
                     <FormattedMessage
-                        defaultMessage="Close"
-                        description="Close the shared catalog"
+                        defaultMessage="Cancel"
+                        description="Cancel button that leaves the shared catalog"
                         id="gui.classroom.shared.catalogClose"
                     />
                 </button>
             </div>
 
             <div className={styles.detailTabs} role="tablist">
                 <button
-                    className={shared.catalogTab === 'all' ? styles.detailTabActive : styles.detailTab}
+                    className={classNames(styles.detailTab, {
+                        [styles.detailTabActive]: shared.catalogTab === 'all',
+                    })}
                     data-testid="shared-catalog-tab-all"
                     type="button"
                     onClick={handleTabAll}
@@ -411,7 +414,9 @@ const SharedAssignmentCatalog = ({ group, isLoading, shared }) => {
                     />
                 </button>
                 <button
-                    className={shared.catalogTab === 'mine' ? styles.detailTabActive : styles.detailTab}
+                    className={classNames(styles.detailTab, {
+                        [styles.detailTabActive]: shared.catalogTab === 'mine',
+                    })}
                     data-testid="shared-catalog-tab-mine"
                     type="button"
                     onClick={handleTabMine}