shipping-portal/resources/assets/vue/components/general/elements/HelpMenuComponent.vue

<template>
     <div class="parentContainer">
        <div class="floating-button">
            <button class="requestModal round-button" data-type="helpMenu">
                <i class="fa fa-info"></i>
                <span class="beta-label">Beta</span>
            </button>
            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="helpMenu">
                <help-menu-form-component></help-menu-form-component>
            </modal-component>
        </div>
     </div>
</template>

<script>
  export default {
  };
</script>

<style scoped>
    .floating-button {
        position: fixed;
        z-index: 9999;
        bottom: 95px;
        right: 24px;
    }


    .round-button {
        width: 60px;
        height: 60px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 50%;
        font-size: 24px;
        cursor: pointer;
        outline: none;
    }

    .round-button:hover {
    background-color: #0056b3;
    }

    .beta-label {
        position: absolute;
        top: 44px;
        left: 88%;
        transform: translateX(-50%);
        background-color: #ffee00;
        color: black;
        padding: 0px 4px;
        border-radius: 5px;
        font-size: 11px;
    }

    @media (max-height: 600px) {
        .floating-button {
            bottom: 85px;
            right: 14px;
        }

        .round-button {
            width: 54px;
            height: 54px;
        }
    }
</style>