title: Profile card going outside of the browser window
body: <p>I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.</p>
  
  <p><strong>it is coming this way</strong>
  <a href="https://i.stack.imgur.com/3iIER.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3iIER.png" alt="it is coming this way"></a> </p>
  
  <p><strong>I need it this way</strong></p>
  
  <p><a href="https://i.stack.imgur.com/hL3L1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hL3L1.png" alt="enter image description here"></a></p>
  
  <p><strong>here is the code</strong></p>
  
  <pre><code>&lt;div class="popover__wrapper"&gt;
      &lt;a&gt;Cyril&lt;/a&gt;
      &lt;div class="push popover__content"&gt;
          &lt;div class="contact-card-user"&gt;
              &lt;div class="left-side"&gt;
                  &lt;img src="../assets/img/profiles/male-user.jpg" alt=""&gt;
              &lt;/div&gt;
             &lt;div class="right-side"&gt;
  
             &lt;div class="details-wrapper"&gt;
                 &lt;h3&gt;Full Name &lt;/h3&gt;
                 &lt;div class="privilege"&gt;Administrator&lt;/div&gt;
                 &lt;div class="designation"&gt;Designer&lt;/div&gt;
                 &lt;div class="description"&gt;+973 1234 5678&lt;/div&gt;
                 &lt;div class="description"&gt;info@company.com&lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
  .popover__wrapper {
      position: relative;
      margin-top: 0;
      display: block;
      cursor: pointer;
  }
  .popover__content {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      left: 40px;
      bottom: -90px;
      transform: translate(0, 30px);
      background-color: transparent;
      padding: 0;
      width: auto;
  }
  .popover__content:before {
      position: absolute;
      z-index: -1;
      content: '';
      left: -20px;
      bottom: 100px;
      border-style: solid;
      border-width: 10px 10px 10px 10px;
      border-color: transparent transparent transparent #a5053d;
      transition-duration: 0.3s;
      transition-property: transform;
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
  }
  .contact-card-user {
      background: #fff;
      display: flex;
      width: max-content;
      box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
  }
  .contact-card-user .left-side {
      margin-right: 20px;
      width: 100%;
      max-width: 200px;
  }
  .contact-card-user .left-side img {
      width: 100%;
      height: auto;
  }
  .contact-card-user .right-side {
      padding-left: 3px;
      padding-top: 5px;
      padding-bottom: 10px;
      padding-right: 25px;
      width: 100%;
      max-width: 260px;
  }
  .contact-card-user .details-wrapper {
      text-align: left;
  }
  .contact-card-user .details-wrapper h3 {
      color: #333;
      font-size: 16px;
      white-space: pre-wrap;
      overflow: hidden;
      margin-bottom: 1px;
      line-height: normal;
  }
  .contact-card-user .details-wrapper .privilege {
      display: inline-block;
      color: #a5053c;
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0.7px;
      margin-bottom: 13px;
      margin-top: 6px;
      border-bottom: 1px solid #00a000;
  }
  .contact-card-user .details-wrapper .designation {
      color: #333;
      margin-bottom: 5px;
  }
  .contact-card-user .details-wrapper .description {
      color: #9a9a9a;
      font-size: 12px;
      line-height: 17px;
  }
  .contact-card-user .details-wrapper .description {
      color: #9a9a9a;
      font-size: 12px;
      line-height: 17px;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>I think may be javascript can solve. Any help?</p>
  
  <p>Thank you</p>