Logs panel: Add paddings so first and last lines can be copied (#35410)

* Logs panel: Add paddings so all lines can be copied

* Update public/app/plugins/panel/logs/LogsPanel.tsx

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

public/app/plugins/panel/logs/LogsPanel.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { LogRows, CustomScrollbar } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { LogRows, CustomScrollbar, useTheme2 } from '@grafana/ui';
 import { PanelProps, Field } from '@grafana/data';
 import { Options } from './types';
 import { dataFrameToLogsModel, dedupLogRows } from 'app/core/logs_model';
@@ -11,7 +12,9 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
   data,
   timeZone,
   options: { showLabels, showTime, wrapLogMessage, sortOrder, dedupStrategy, enableLogDetails },
+  title,
 }) => {
+  const theme = useTheme2();
   if (!data) {
     return (
       <div className="panel-empty">
@@ -20,6 +23,12 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
     );
   }
 
+  const spacing = css`
+    margin-bottom: ${theme.spacing(1.5)};
+    //We can remove this hot-fix when we fix panel menu with no title overflowing top of all panels
+    margin-top: ${theme.spacing(!title ? 2.5 : 0)};
+  `;
+
   const newResults = data ? dataFrameToLogsModel(data.series, data.request?.intervalMs) : null;
   const logRows = newResults?.rows || [];
   const deduplicatedRows = dedupLogRows(logRows, dedupStrategy);
@@ -30,19 +39,21 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
 
   return (
     <CustomScrollbar autoHide>
-      <LogRows
-        logRows={logRows}
-        deduplicatedRows={deduplicatedRows}
-        dedupStrategy={dedupStrategy}
-        highlighterExpressions={[]}
-        showLabels={showLabels}
-        showTime={showTime}
-        wrapLogMessage={wrapLogMessage}
-        timeZone={timeZone}
-        getFieldLinks={getFieldLinks}
-        logsSortOrder={sortOrder}
-        enableLogDetails={enableLogDetails}
-      />
+      <div className={spacing}>
+        <LogRows
+          logRows={logRows}
+          deduplicatedRows={deduplicatedRows}
+          dedupStrategy={dedupStrategy}
+          highlighterExpressions={[]}
+          showLabels={showLabels}
+          showTime={showTime}
+          wrapLogMessage={wrapLogMessage}
+          timeZone={timeZone}
+          getFieldLinks={getFieldLinks}
+          logsSortOrder={sortOrder}
+          enableLogDetails={enableLogDetails}
+        />
+      </div>
     </CustomScrollbar>
   );
 };