From f120f4f7e54c313aa0500a52473487fc54fd9f7a Mon Sep 17 00:00:00 2001
From: "oura.a" <oura.a@nds-tyo.co.jp>
Date: Fri, 22 Sep 2023 07:15:54 +0000
Subject: [PATCH] =?UTF-8?q?Merged=20PR=20436:=20[PBI1197=E6=AE=8B]?=
 =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88?=
 =?UTF-8?q?=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6=E7=A2=BA=E8=AA=8D=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 概要
[Task2712: [PBI1197残]画面レイアウトについて確認する](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2712)

アカウント情報画面について、以下のデザイン修正を実施しました。
・「Save changes」ボタンを右側に移動
・表内の値が長かった場合に三点リーダでの省略表示から、改行して全体を表示する

## レビューポイント
なし

## UIの変更
https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task2712?csf=1&web=1&e=mOV4KF

## 動作確認状況
ローカルで動作確認済み

## 補足
なし
---
 .../src/pages/AccountPage/index.tsx           |   2 +-
 dictation_client/src/styles/app.module.scss   | 149 ++----------------
 2 files changed, 13 insertions(+), 138 deletions(-)

diff --git a/dictation_client/src/pages/AccountPage/index.tsx b/dictation_client/src/pages/AccountPage/index.tsx
index 402e044..d407582 100644
--- a/dictation_client/src/pages/AccountPage/index.tsx
+++ b/dictation_client/src/pages/AccountPage/index.tsx
@@ -312,7 +312,7 @@ const AccountPage: React.FC = (): JSX.Element => {
                   </dd>
                 </dl>
               </div>
-              <div className={`${styles.box100} ${styles.alignLeft} `}>
+              <div className={`${styles.box100} ${styles.alignRight} `}>
                 <input
                   type="submit"
                   name="submit"
diff --git a/dictation_client/src/styles/app.module.scss b/dictation_client/src/styles/app.module.scss
index c8c2f4d..89d6d34 100644
--- a/dictation_client/src/styles/app.module.scss
+++ b/dictation_client/src/styles/app.module.scss
@@ -868,9 +868,7 @@ h3 + .brCrumb .tlIcon {
 .listVertical dd {
   width: 42%;
   text-align: right;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: break-all;
 }
 
 .boxFlex {
@@ -1543,136 +1541,15 @@ _:-ms-lang(x)::-ms-backdrop,
   padding-bottom: 2rem;
   vertical-align: top;
 }
-.account.account .listVertical,
-.user.account .listVertical,
-.license.account .listVertical,
-.dictation.account .listVertical,
-.partners.account .listVertical,
-.workflow.account .listVertical {
+
+.account .listVertical {
   margin-bottom: 3rem;
 }
-.account.account .listVertical dd .formInput,
-.user.account .listVertical dd .formInput,
-.license.account .listVertical dd .formInput,
-.dictation.account .listVertical dd .formInput,
-.partners.account .listVertical dd .formInput,
-.workflow.account .listVertical dd .formInput {
+.account .listVertical dd .formInput {
   max-width: 100%;
 }
-.account.account .listVertical dd .formCheckToggle,
-.user.account .listVertical dd .formCheckToggle,
-.license.account .listVertical dd .formCheckToggle,
-.dictation.account .listVertical dd .formCheckToggle,
-.partners.account .listVertical dd .formCheckToggle,
-.workflow.account .listVertical dd .formCheckToggle {
-  position: relative;
-  cursor: pointer;
-}
-.account.account .listVertical dd .formCheckToggle .toggleBase,
-.user.account .listVertical dd .formCheckToggle .toggleBase,
-.license.account .listVertical dd .formCheckToggle .toggleBase,
-.dictation.account .listVertical dd .formCheckToggle .toggleBase,
-.partners.account .listVertical dd .formCheckToggle .toggleBase,
-.workflow.account .listVertical dd .formCheckToggle .toggleBase {
-  display: inline-block;
-  width: 2.8rem;
-  height: 1.6rem;
-  margin-right: 0.5rem;
-  border-radius: 0.8rem;
-  background: #e6e6e6;
-  vertical-align: bottom;
-  position: relative;
-  -moz-transition: all 0.3s ease-out;
-  -ms-transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-  transition: all 0.3s ease-out;
-}
-.account.account .listVertical dd .formCheckToggle .toggleBase::after,
-.user.account .listVertical dd .formCheckToggle .toggleBase::after,
-.license.account .listVertical dd .formCheckToggle .toggleBase::after,
-.dictation.account .listVertical dd .formCheckToggle .toggleBase::after,
-.partners.account .listVertical dd .formCheckToggle .toggleBase::after,
-.workflow.account .listVertical dd .formCheckToggle .toggleBase::after {
-  content: "";
-  width: 1.3rem;
-  height: 1.3rem;
-  border-radius: 50%;
-  background: #999999;
-  position: absolute;
-  top: 0.15rem;
-  left: 0.15rem;
-  -moz-transition: all 0.15s ease-out;
-  -ms-transition: all 0.15s ease-out;
-  -webkit-transition: all 0.15s ease-out;
-  transition: all 0.15s ease-out;
-}
-.account.account .listVertical dd .formCheckToggle input,
-.user.account .listVertical dd .formCheckToggle input,
-.license.account .listVertical dd .formCheckToggle input,
-.dictation.account .listVertical dd .formCheckToggle input,
-.partners.account .listVertical dd .formCheckToggle input,
-.workflow.account .listVertical dd .formCheckToggle input {
-  position: absolute;
-  width: 0;
-  heigh: 0;
-}
-.account.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
-.user.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
-.license.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
-.dictation.account
-  .listVertical
-  dd
-  .formCheckToggle
-  input:checked
-  ~ .toggleBase,
-.partners.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
-.workflow.account
-  .listVertical
-  dd
-  .formCheckToggle
-  input:checked
-  ~ .toggleBase {
-  background: #c4eeec;
-}
-.account.account
-  .listVertical
-  dd
-  .formCheckToggle
-  input:checked
-  ~ .toggleBase::after,
-.user.account
-  .listVertical
-  dd
-  .formCheckToggle
-  input:checked
-  ~ .toggleBase::after,
-.license.account
-  .listVertical
-  dd
-  .formCheckToggle
-  input:checked
-  ~ .toggleBase::after,
-.dictation.account
-  .listVertical
-  dd
-  .formCheckToggle
-  input:checked
-  ~ .toggleBase::after,
-.partners.account
-  .listVertical
-  dd
-  .formCheckToggle
-  input:checked
-  ~ .toggleBase::after,
-.workflow.account
-  .listVertical
-  dd
-  .formCheckToggle
-  input:checked
-  ~ .toggleBase::after {
-  background: #00b4aa;
-  top: 0.15rem;
-  left: 1.35rem;
+.account .box100.alignRight {
+  width: calc(1200px + 3rem);
 }
 
 .menuAction {
@@ -2332,8 +2209,7 @@ tr.isSelected .menuInTable li a.isDisable {
 }
 .formChange ul.chooseMember li input + label:hover,
 .formChange ul.holdMember li input + label:hover {
-  background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left
-    center;
+  background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center;
   background-size: 1.3rem;
 }
 .formChange ul.chooseMember li input:checked + label,
@@ -2344,8 +2220,8 @@ tr.isSelected .menuInTable li a.isDisable {
 }
 .formChange ul.chooseMember li input:checked + label:hover,
 .formChange ul.holdMember li input:checked + label:hover {
-  background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat
-    right center;
+  background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat right
+    center;
   background-size: 1.3rem;
 }
 .formChange > p {
@@ -2498,8 +2374,7 @@ tr.isSelected .menuInTable li a.isDisable {
 }
 .formChange ul.chooseMember li input + label:hover,
 .formChange ul.holdMember li input + label:hover {
-  background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left
-    center;
+  background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center;
   background-size: 1.3rem;
 }
 .formChange ul.chooseMember li input:checked + label,
@@ -2510,8 +2385,8 @@ tr.isSelected .menuInTable li a.isDisable {
 }
 .formChange ul.chooseMember li input:checked + label:hover,
 .formChange ul.holdMember li input:checked + label:hover {
-  background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat
-    right center;
+  background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat right
+    center;
   background-size: 1.3rem;
 }
 .formChange > p {