Добавлены фильтры для сообщений. Убраны заголовки. Изменены стили.

src/components/Well.jsx

@@ -17,7 +17,7 @@ export default function Well() {
     <Layout>
       <Menu
         mode="horizontal"
-        selectable={false}
+        selectable={true}
         className="well_menu"
       >
         <Menu.Item key="1" icon={<FundViewOutlined/>}>

src/pages/Messages.jsx

@@ -1,4 +1,4 @@
-import {Button, Table, Select, DatePicker, ConfigProvider} from 'antd';
+import {Table, Select, DatePicker, ConfigProvider} from 'antd';
 import {MessageService} from '../services/api'
 import {useState, useEffect} from 'react'
 import {useParams} from 'react-router-dom'
@@ -70,12 +70,12 @@ export default function Messages() {
     setRange(range)
   }
 
-  const GetMessages = async() => {
+  const GetMessages = async () => {
     setLoader(true)
     try {
       let begin = null
       let end = null
-      if(range?.length>1){
+      if (range?.length > 1) {
         begin = range[0].toISOString()
         end = range[1].toISOString()
       }
@@ -110,25 +110,25 @@ export default function Messages() {
 
   return (
     <>
-      <h2>Сообщения</h2>
-      <hr/>
-      <h3>Фильтр сообщений</h3>
-      <Select
-        mode="multiple"
-        allowClear
-        placeholder="Фильтр сообщений"
-        className="filter-selector"
-        value={categories}
-        onChange = {setCategories}>
-        {children}
-      </Select>
-      <ConfigProvider locale={locale}>
-        <RangePicker
-          showTime
-          onChange={onChangeRange}
-        />
-      </ConfigProvider>
 
+      <div className='filter-group'>
+        <h3 className='filter-group__heading'>Фильтр сообщений</h3>
+        <Select
+          mode="multiple"
+          allowClear
+          placeholder="Фильтр сообщений"
+          className="filter-selector"
+          value={categories}
+          onChange={setCategories}>
+          {children}
+        </Select>
+        <ConfigProvider locale={locale}>
+          <RangePicker
+            showTime
+            onChange={onChangeRange}
+          />
+        </ConfigProvider>
+      </div>
       <Table
         columns={columns}
         dataSource={messages}

src/styles/message.css

@@ -1,11 +1,3 @@
-/*.ant-table.ant-table-small .ant-table-tbody > tr > td {*/
-/*  padding: 0;*/
-/*}*/
-
-/*.ant-table-tbody > tr > td {*/
-/*  border-bottom: 0.5px;*/
-/*}*/
-
 .event_message > td {
   font-size: 14px;
   padding: 1px !important;
@@ -37,6 +29,15 @@
   background: #505060;
 }
 
+.filter-group {
+  margin: 0 0 5px 0;
+}
+
+.filter-group__heading {
+  margin: 5px auto;
+  align-items: center;
+}
+
 td.ant-table-column-sort {
   color: black;
   background-color: rgb(221, 247, 221);