Remove usless margin on skill

Gnome-Archiviste · Mar 19, 2024 · 4d42ea2 · 4d42ea2
1 parent eb80b93
commit 4d42ea2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/src/app/actor/character-skill.component.html b/src/app/actor/character-skill.component.html
@@ -22,17 +22,17 @@
         <input *ngIf="master$ | async" [checked]="masterUsed$ | async" (change)="toggleMasterUse($event)" type="checkbox" [disabled]="prodigyUsed$ | async">
         <input *ngIf="prodigy$ | async" [checked]="prodigyUsed$ | async" (change)="toggleProdigyUse($event)" type="checkbox" [disabled]="!(masterUsed$ | async)">
     </span>
-    <span class="add-remove-point" *ngIf="(haveAvailableSkillPoints$ | async) || (havePendingSkillPoints | async)">
-        <span>
-            <button class="remove-point" *ngIf="canRemovePoint$ | async" (click)="removePoint()">
-                -
-            </button>
-        </span>
-        <span>
-            <button class="add-point" *ngIf="canAddPoint$ | async" (click)="addPoint()">
-                +
-            </button>
-        </span>
+</div>
+<div class="add-remove-point" *ngIf="(haveAvailableSkillPoints$ | async) || (havePendingSkillPoints | async)">
+    <span>
+        <button class="remove-point" *ngIf="canRemovePoint$ | async" (click)="removePoint()">
+            -
+        </button>
+    </span>
+    <span>
+        <button class="add-point" *ngIf="canAddPoint$ | async" (click)="addPoint()">
+            +
+        </button>
     </span>
 </div>
 

diff --git a/src/app/actor/character-skill.component.scss b/src/app/actor/character-skill.component.scss
@@ -2,7 +2,6 @@
   display: grid;
   gap: 8px;
   grid-template-columns: minmax(165px, 1fr) 17px 40px 10px 60px;
-  grid-template-areas: ". . . . ." ". add-remove-point add-remove-point . .";
   align-items: center;
 
   .has-additional-point {
@@ -35,13 +34,19 @@
     font-size: 1.2rem;
   }
 
-  .add-remove-point {
-    grid-area: add-remove-point;
-    width: 52px;
+  .master-prodigy {
     display: flex;
-    gap: 8px;
-    justify-content: space-between;
   }
+}
+
+.add-remove-point {
+  margin-top: 8px;
+  width: 52px;
+  margin-left: auto;
+  margin-right: 100px;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
 
   .add-point {
     display: grid;
@@ -76,10 +81,6 @@
       box-shadow: 0 0 5px #5c0909;
     }
   }
-
-  .master-prodigy {
-    display: flex;
-  }
 }
 
 :host {