lock button woking and class fixed

src/components/InteractiveEditor/PinInput.vue

@@ -68,60 +68,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .pin-gate {
-    padding: .9rem;
-    border-radius: var(--curve-factor);
-    border: 1px solid var(--border);
-    background: var(--item-background);
-    box-shadow: var(--item-shadow);
-    color: var(--primary);
-  }
 
-  .pin-head {
+@import '@/styles/pin-input.scss';
-    display: flex;
-    align-items: center;
-    gap: .5rem;
-    margin-bottom: .6rem;
-    font-weight: 600;
-  }
-  .pin-form {
-    margin-bottom: .6rem;
-  }
-  .pin-actions {
-    display: flex;
-    align-items: center;
-    justify-content: right;
-    gap: .5rem;
-    flex-wrap: wrap;
-  }
 
-  .pin-btn {
-    padding: .5rem .9rem;
-    border-radius: .6rem;
-    border: 1px solid var(--border);
-    background: var(--button-bg);
-    color: var(--primary);
-    cursor: pointer;
-    transition: transform .06s ease;
-
-    &:active { transform: translateY(1px); }
-  }
-
-  .pin-reset {
-    background: transparent;
-    border: none;
-    padding: .3rem .2rem;
-    color: var(--primary);
-    opacity: .8;
-    text-decoration: underline;
-    cursor: pointer;
-
-    &:hover { opacity: 1; }
-  }
-  .btn-icon {
-    margin-right: .4rem;
-    font-size: .95em;
-    line-height: 0;
-    opacity: .9;
-  }
 </style>

src/components/LinkItems/Section.vue

@@ -20,10 +20,6 @@
       @unlock_attempt="saveUnlockPins"
     />
     <div v-if="!showPinRequired">
-      <button v-if="unLockedWithPin" class="pin-reset" @click="lockAgain" type="button">
-        <i class="fas fa-lock btn-icon" aria-hidden="true"></i>
-        {{ $t('pin.lock') }}
-      </button>
       <!-- If no items, show message -->
       <div v-if="isEmpty" class="no-items">
         {{ $t('home.no-items-section') }}
@@ -82,6 +78,12 @@
           @navigateToSection="navigateToSection"
         />
       </div>
+      <div v-if="unLockedWithPin" class="pin-unlocked-bar">
+        <button class="pin-reset" @click="lockAgain" type="button">
+          <i class="fas fa-lock btn-icon" aria-hidden="true"></i>
+          {{ $t('pin.lock') }}
+        </button>
+      </div>
     </div>
     <!-- Modal for opening in modal view -->
     <IframeModal
@@ -431,6 +433,7 @@ export default {
 <style scoped lang="scss">
 @import '@/styles/media-queries.scss';
 @import '@/styles/style-helpers.scss';
+@import '@/styles/pin-input.scss';
 
 .no-items {
     width: 100px;

src/styles/pin-input.scss

@@ -0,0 +1,65 @@
+.btn-icon {
+  margin-right: .4rem;
+  font-size: .95em;
+  line-height: 0;
+  opacity: .9;
+}
+
+.pin-gate {
+  padding: .9rem;
+  border-radius: var(--curve-factor);
+  border: 1px solid var(--border);
+  background: var(--item-background);
+  box-shadow: var(--item-shadow);
+  color: var(--primary);
+}
+
+.pin-head {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  margin-bottom: .6rem;
+  font-weight: 600;
+}
+
+.pin-form {
+  margin-bottom: .6rem;
+}
+.pin-actions {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  gap: .5rem;
+  flex-wrap: wrap;
+}
+
+.pin-btn {
+  padding: .5rem .9rem;
+  border-radius: .6rem;
+  border: 1px solid var(--border);
+  background: var(--button-bg);
+  color: var(--primary);
+  cursor: pointer;
+  transition: transform .06s ease;
+
+  &:active { transform: translateY(1px); }
+}
+
+.pin-reset {
+  background: transparent;
+  border: none;
+  padding: .3rem .2rem;
+  color: var(--primary);
+  opacity: .8;
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:hover { opacity: 1; }
+}
+
+.pin-unlocked-bar{
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: flex-end;
+}