Merge pull request juice-shop#2529 from AyushRajSinghParihar/Web3SandboxCheck

GWEI fixed - indentation issue persists

Author: J12934

frontend/src/app/web3-sandbox/web3-sandbox.component.html

@@ -56,29 +56,35 @@ <h4>Compiler Errors:</h4>
       </div>
       <div *ngIf="compiledContracts">
         <h3 class="contracts-title">{{ "TITLE_CONTRACT_DEPLOYMENT" | translate}}</h3>
-        <mat-form-field
-          style="width: 45%; margin-right: 10%"
-          appearance="outline"
-          color="accent"
-        >
-          <mat-label>{{ "LABEL_COMPILED_CONTRACTS" | translate}}</mat-label>
-          <select matNativeControl [(ngModel)]="selectedContractName">
-            <option
-              *ngFor="let contractName of contractNames"
-              [value]="contractName"
-            >
-              {{ contractName }}
-            </option>
-          </select>
-        </mat-form-field>
-        <mat-form-field>
-          <input
-            matInput
-            type="number"
-            [placeholder]="'GWEI_VALUE_FOR_SENDING_ETH' | translate"
-            [(ngModel)]="commonGweiValue"
-          />
-        </mat-form-field>
+        <div class="form-fields-container">
+          <mat-form-field
+            class="contract-selector"
+            appearance="outline"
+            color="accent"
+          >
+            <mat-label>{{ "LABEL_COMPILED_CONTRACTS" | translate}}</mat-label>
+            <select matNativeControl [(ngModel)]="selectedContractName">
+              <option
+                *ngFor="let contractName of contractNames"
+                [value]="contractName"
+              >
+                {{ contractName }}
+              </option>
+            </select>
+          </mat-form-field>
+          <mat-form-field
+            class="gwei-input"
+            appearance="outline"
+            color="accent"
+          >
+            <mat-label>{{ "GWEI_VALUE_FOR_SENDING_ETH" | translate }}</mat-label>
+            <input
+              matInput
+              type="number"
+              [(ngModel)]="commonGweiValue"
+            />
+          </mat-form-field>
+        </div>
         <button
           mat-raised-button
           type="button"

frontend/src/app/web3-sandbox/web3-sandbox.component.scss

@@ -118,3 +118,21 @@ ul {
   font-weight: 500;
   margin-top: 16px;
 }
+
+.form-fields-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 16px;
+  width: 100%;
+}
+
+.contract-selector {
+  flex: 1 1 60%;
+  min-width: 200px;
+}
+
+.gwei-input {
+  flex: 1 1 30%;
+  min-width: 150px;
+}