Merged PR 436: [PBI1197残]画面レイアウトについて確認する

## 概要
[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

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

## 補足
なし

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"

dictation_client/src/styles/app.module.scss

@@ -868,9 +868,7 @@ h3 + .brCrumb .tlIcon {
 .listVertical dd {
   width: 42%;
   text-align: right;
-  white-space: nowrap;
+  word-break: break-all;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .boxFlex {
@@ -1543,136 +1541,15 @@ _:-ms-lang(x)::-ms-backdrop,
   padding-bottom: 2rem;
   vertical-align: top;
 }
-.account.account .listVertical,
+
-.user.account .listVertical,
+.account .listVertical {
-.license.account .listVertical,
-.dictation.account .listVertical,
-.partners.account .listVertical,
-.workflow.account .listVertical {
   margin-bottom: 3rem;
 }
-.account.account .listVertical dd .formInput,
+.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 {
   max-width: 100%;
 }
-.account.account .listVertical dd .formCheckToggle,
+.account .box100.alignRight {
-.user.account .listVertical dd .formCheckToggle,
+  width: calc(1200px + 3rem);
-.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;
 }
 
 .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
+  background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center;
-    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
+  background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat right
-    right center;
+    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
+  background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center;
-    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
+  background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat right
-    right center;
+    center;
   background-size: 1.3rem;
 }
 .formChange > p {