Small improvements to public activity listing UI

[nicksellen]

Fixes #2602

What does this PR do?

• "upcoming activities" heading
• show the activity type name on first line
• date on second
• a horiztonal line to divide the activity info from the activity description

Links to related issues

Checklist

• [ ] added a test, or explain why one is not needed/possible...
• [ ] no unrelated changes
• [ ] asked someone for a code review
• [ ] joined #karrot:matrix.org
• [ ] added an entry to CHANGELOG.md (description, pull request link, username(s))
• [ ] tried out on a mobile device (does everything work as expected on a smaller screen?)

[codecov[bot]]

Codecov Report

Merging #2621 (63040c1) into master (fb3beef) will increase coverage by 0.01%. The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #2621      +/-   ##
==========================================
+ Coverage   76.82%   76.84%   +0.01%     
==========================================
  Files         376      376              
  Lines       39933    39957      +24     
  Branches     1976     1976              
==========================================
+ Hits        30679    30703      +24     
  Misses       9254     9254              

Impacted Files	Coverage Δ
src/groupInfo/pages/GroupPreview.vue	99.41% <100.00%> (+0.04%)	:arrow_up:

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more

[nicksellen]

Maybe @brnsolikyl wants to look at this design here :)

[brnsolikyl]

Looking good! I like it!

[nicksellen]

I improved it a bit more as well, I got bothered by the:

• misaligned ativity type name and date text
• cut off icon
• dividing line that didn't cross the whole thing
• the apply button being on the edge (there is still some oddness with how all the buttons will show up in certain cases though....