stretched icon when extractor description long (#789)

* disable ripple effect

* fix the stretch

---------

Co-authored-by: Chen Wang <[email protected]>

Author: tcnichol

frontend/src/components/listeners/ListenerItem.tsx

@@ -51,18 +51,27 @@ export default function ListenerItem(props: ListenerCardProps) {
 					{extractorDescription}
 				</Typography>
 			</Box>
-			<IconButton
-				color="primary"
-				disabled={
-					fileId !== undefined || datasetId !== undefined ? false : true
-				}
-				onClick={() => {
-					setOpenSubmitExtraction(true);
-					setSelectedExtractor(extractorInfo);
+			<Box
+				sx={{
+					flexGrow: 1,
+					display: "flex",
+					justifyContent: "end",
+					margin: "auto",
 				}}
 			>
-				<PlayCircleIcon />
-			</IconButton>
+				<IconButton
+					color="primary"
+					disabled={
+						fileId !== undefined || datasetId !== undefined ? false : true
+					}
+					onClick={() => {
+						setOpenSubmitExtraction(true);
+						setSelectedExtractor(extractorInfo);
+					}}
+				>
+					<PlayCircleIcon />
+				</IconButton>
+			</Box>
 		</Box>
 	);
 }