seen user button wrapping prohibited.

specify maximum width of seen user popover.
Change icon size specification method.

src/client/js/components/Icons/AttachmentIcon.jsx

@@ -5,8 +5,7 @@ const Attachment = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 14 14"
     className="table-top-icon"
-    width="20"
-    height="20"
+
   >
     <rect width="14" height="14" fillOpacity="0" />
     <g className="cls-1">

src/client/js/components/Icons/PageListIcon.jsx

@@ -5,8 +5,7 @@ const PageList = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 14 14"
     className="table-top-icon"
-    width="20"
-    height="20"
+
   >
     <rect width="14" height="14" fillOpacity="0" />
     <path d="M12.63,2.72H1.37a.54.54,0,0,1,0-1.08H12.63a.54.54,0,0,1,0,1.08Z" />

src/client/js/components/Icons/RecentChangesIcon.jsx

@@ -5,8 +5,7 @@ const RecentChanges = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 14 14"
     className="table-top-icon"
-    width="20"
-    height="20"
+
   >
     <rect width="14" height="14" fillOpacity="0" />
     <path

src/client/js/components/Icons/TimeLineIcon.jsx

@@ -5,8 +5,7 @@ const TimeLine = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 14 14"
     className="table-top-icon"
-    width="20"
-    height="20"
+
   >
     <rect width="14" height="14" fillOpacity="0" />
     <path

src/client/js/components/PageAccessoriesModal.jsx

@@ -46,7 +46,7 @@ const PageAccessoriesModal = (props) => {
               <NavLink
                 onClick={() => { switchTabHandler('pageList') }}
               >
-                <PageListIcon />
+                <svg width="20px" height="20px"><PageListIcon /></svg>
                 { t('page_list') }
               </NavLink>
             </NavItem>

src/client/js/components/TopOfTableContents.jsx

@@ -51,12 +51,12 @@ const TopOfTableContents = (props) => {
 
   return (
     <>
-      <div className="top-of-table-contents d-flex align-items-end pb-1">
+      <div className="top-of-table-contents d-flex align-items-center pb-1 ">
         <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('pageList')}>
           <PageListIcon />
         </button>
 
-        <button type="button" className="bg-transparent border-0 active" onClick={() => openPageAccessoriesModal('timeLine')}>
+        <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('timeLine')}>
           <TimeLineIcon />
         </button>
 
@@ -69,6 +69,7 @@ const TopOfTableContents = (props) => {
         </button>
         {/* [TODO: setting Footprints' icon by GW-3308] */}
         <div
+          className="justify-content-end"
           id="seen-user-list"
           data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"
           data-sum-of-seen-users="{{ page.seenUsers.length|default(0) }}"

src/client/js/components/User/SeenUserList.jsx

@@ -26,7 +26,7 @@ const SeenUserList = (props) => {
         <span className="seen-user-count">{pageContainer.state.countOfSeenUsers}</span>
       </Button>
       <Popover placement="bottom" isOpen={popoverOpen} target="SeenUserPopover" toggle={toggle} trigger="legacy">
-        <PopoverBody className="col">
+        <PopoverBody className="seen-user-popover">
           <div className="px-2 text-right user-list-content text-truncate text-muted">
             <UserPictureList users={pageContainer.state.seenUsers} />
           </div>

src/client/styles/scss/_layout.scss

@@ -141,3 +141,25 @@ body {
     margin-left: 0.5em;
   }
 }
+
+.grw-page-accessories-modal {
+  .table-top-icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.top-of-table-contents {
+  .table-top-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.btn-seen-user-lists {
+  white-space: nowrap;
+}
+
+.seen-user-popover {
+  max-width: 200px;
+}