ref(issues): Remove data section borders (#38538)

**Before___**
<img width="846" alt="Screen Shot 2022-09-07 at 2 12 21 PM"
src="https://user-images.githubusercontent.com/44172267/188981189-46c634f7-7574-45bb-8096-af35b8e281bf.png">

**After___**
<img width="846" alt="Screen Shot 2022-09-07 at 2 12 00 PM"
src="https://user-images.githubusercontent.com/44172267/188981243-8b8b4bc5-48e2-41ee-8b74-233462d356d9.png">

static/app/components/clippedBox.tsx

@@ -159,15 +159,7 @@ const Wrapper = styled('div', {
     prop !== 'clipHeight' && prop !== 'isClipped' && prop !== 'isRevealed',
 })<State & {clipHeight: number}>`
   position: relative;
-  border-top: 1px solid ${p => p.theme.backgroundSecondary};
-  margin-left: -${space(3)};
-  margin-right: -${space(3)};
-  padding: ${space(2)} ${space(3)} 0;
-
-  :first-of-type {
-    margin-top: -${space(2)};
-    border: 0;
-  }
+  padding: ${space(1.5)} 0;
 
   /* For "Show More" animation */
   ${p =>
@@ -186,7 +178,7 @@ const Wrapper = styled('div', {
 `;
 
 const Title = styled('h5')`
-  margin-bottom: ${space(2)};
+  margin-bottom: ${space(1)};
 `;
 
 const ClipFade = styled('div')`

static/app/components/events/eventDataSection.tsx

@@ -137,10 +137,6 @@ const SectionHeader = styled('div')<{isCentered?: boolean}>`
   align-items: center;
   margin-bottom: ${space(1)};
 
-  > * {
-    margin-bottom: ${space(0.5)};
-  }
-
   & h3,
   & h3 a {
     font-size: 14px;

static/app/components/events/eventTagsAndScreenshot/index.tsx

@@ -66,7 +66,6 @@ function EventTagsAndScreenshots({
             <TagsHighlight event={event} />
           </TagsHighlightWrapper>
         )}
-        {hasEventContext && showTags && <HorizontalDivider />}
         {showTags && (
           <Tags
             organization={organization}
@@ -133,13 +132,7 @@ const TagsHighlightWrapper = styled('div')`
   overflow: hidden;
   padding: 0 ${space(2)};
 
-  @media (min-width: ${p => p.theme.breakpoints.small}) {
+  @media (min-width: ${p => p.theme.breakpoints.medium}) {
     padding: 0 ${space(4)};
   }
 `;
-
-const HorizontalDivider = styled('div')`
-  height: 1px;
-  width: 100%;
-  background: ${p => p.theme.innerBorder};
-`;

static/app/components/events/styles.tsx

@@ -6,14 +6,13 @@ import {Theme} from 'sentry/utils/theme';
 export const DataSection = styled('div')`
   display: flex;
   flex-direction: column;
-  border-top: 1px solid ${p => p.theme.innerBorder};
   margin: 0;
 
   /* Padding aligns with Layout.Body */
-  padding: ${space(3)} ${space(2)} ${space(2)};
+  padding: ${space(1)} ${space(2)};
 
   @media (min-width: ${p => p.theme.breakpoints.medium}) {
-    padding: ${space(3)} ${space(4)} ${space(3)};
+    padding: ${space(1.5)} ${space(4)};
   }
 `;
 
@@ -88,7 +87,7 @@ export const CauseHeader = styled('div')`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: ${space(3)};
+  margin-bottom: ${space(1)};
 
   & button,
   & h3 {

static/app/views/organizationGroupDetails/groupEventDetails/groupEventDetails.tsx

@@ -310,6 +310,12 @@ const Wrapper = styled('div')`
 `;
 
 const StyledLayoutMain = styled(Layout.Main)`
+  padding-top: ${space(2)};
+
+  @media (max-width: ${p => p.theme.breakpoints.medium}) {
+    padding-top: ${space(1)};
+  }
+
   @media (min-width: ${p => p.theme.breakpoints.large}) {
     border-right: 1px solid ${p => p.theme.border};
     padding-right: 0;

static/less/group-detail.less

@@ -495,7 +495,6 @@ div.traceback > ul {
 }
 
 .exception {
-  border-bottom: 1px solid @trim;
   margin: 0 0 20px;
 
   &:last-child {