[bav2-49] > Add responsive design for the text section (#14)

* Add section.

* Add fix.

* Add fix.

* Add refine.

Author: MichaelRedkinSigma

DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/admin/admin.component.html

@@ -8,7 +8,8 @@ <h2 class="page-title admin-title" translate>Admin.Header</h2>
                 <span>
                     <img src="assets/img/info.png" class="info-img" alt="" />
                 </span>
-                <span class="main-text" translate>AdminForm.ShortHelpText 
+                <span class="main-text">
+                    <span translate>AdminForm.ShortHelpText</span>
                     <div class="big-text" *ngIf="isExpandedText" translate>AdminForm.FullHelpText</div>
                 </span>
                 <span *ngIf="!isExpandedText" class="expand-button" (click)="changeExpandSection()">
@@ -20,15 +21,15 @@ <h2 class="page-title admin-title" translate>Admin.Header</h2>
                     <img src="assets/img/chevron-up-m.png" class="expandable" alt="" />
                 </span>
             </div>
-            <div>
+            <div class="admin-buttons-sm-center">
               <button class="btn btn-sm btn-connect-account btn-connect-account-margin" (click)="reset()" translate>ConnectAccountButton<img class="arrow-up-right" src="assets/img/arrow-up-right.png" alt="" /></button>
               <button class="btn btn-sm btn-connect-account btn-connect-account-margin" (click)="connectTestAccount()" translate>UseDemoAccountButton<img class="arrow-up-right" src="assets/img/arrow-up-right.png" alt="" /></button>
             </div>
 
-            <div class="step-container">
+            <div class="step-container admin-buttons-sm-center">
                 <span class="step-title title-bold pre-step-title" translate>AdminForm.GetFreeTrial</span>
             </div>
-            <div>
+            <div class="admin-buttons-sm-center">
               <button class="btn btn-new btn-free-trial-margin" (click)="startFreeTrial()"><span translate>StartTrialAccountButton</span>
                 <span class="arrow-up-right-container"><img src="assets/img/arrow-up-right.png" alt="" /></span></button>
             </div>

DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_admin.scss

@@ -385,4 +385,76 @@
                 right: -21px;
         }
     }
-}
+}
+
+@include media-breakpoint-down(xl) {
+    .text-helper-expand > span {
+        display: flex;
+        align-items: center; /* Center content vertically within each span */
+    }
+
+    .text-helper-expand > span:nth-child(2) {
+        word-break: break-word;
+        overflow-wrap: break-word;
+        box-sizing: border-box;
+        max-width: 80%;
+        min-width: 80%;
+        .main-text {
+            display: block;
+        }
+    }
+
+    .text-helper-expand {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+
+        .main-text {
+            min-width: auto;
+
+            span {
+                max-width: 80%;
+                min-width: 80%;
+            }
+
+            div {
+                max-width: 80%;
+                min-width: 80%;
+                display: block;
+            }
+        }
+
+        .expand-button {
+            flex: 0 0 auto;
+            /* Allow these spans to take only the space they need */
+            margin-right: 10px;
+            /* Add some space between the first two spans */
+            flex: 1;
+            padding-bottom: 16px;
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .admin-buttons-sm-center {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .text-helper-expand {
+        display: flex;
+        flex-wrap: wrap; /* Allow items to wrap to the next line */
+        align-items: center; /* Align items vertically in the center */
+    }
+
+
+    .text-helper-expand > span:nth-child(3),
+    .text-helper-expand > span:nth-child(4) {
+        width: 100%; /* Make these spans take full width in a new row */
+        margin-top: 10px; /* Add some space above the new row */
+        flex: 2;
+    }
+}