The CSS below still works as of JSM 5.17.2. To implement this using Scriptrunner:

1. Navigate to Scriptrunner UI Fragments ($base/plugins/servlet/scriptrunner/admin/fragments).
2. Create a new web panel from Show a web panel:
   1. Name: <your choice>
   2. Location: servicedesk.portal.header
   3. Key: <your choice>
   4. Menu text: <blank>
   5. Weight: <blank>
   6. Condition: Can be used if you want to restrict this to a specific project (docs).
   7. Provider class/script:

      writer.write("""
      <style>
      .vp-activity-list.insight-init {
          display: flex;
          list-style: none;
          flex-direction: column;
      }
      
      .vp-activity-list>li {
              margin: 0;
              padding: 0;
              order: -1;
      }
      </style>
      """)

1. Click Update and check an issue in portal view to confirm.

@ncats lab: can you provide some more details regarding using the script above within Scriptrunner. We have Scriptrunner installed but i am a rookie and need some guidance.

Thanks in advance.

Regards, B. Gurn

There are several add-ons that allow you to run custom CSS. Scriptrunner is such. 

The following CSS should move the Details panel to the top of the Activity stream on the customer portal:

.vp-activity-list.insight-init {
    display: flex;
    list-style: none;
    flex-direction: column;
}

.vp-activity-list>li {
        margin: 0;
        padding: 0;
        order: -1;
}